/* TKATI ADMIN — DESIGN TOKENS
 *
 * WHAT THIS FOLLOWS. tkati.com's CURRENT system, assets/styles.css §0, which
 * is true-neutral monochrome: a near-black canvas, raised levels that are
 * white at an alpha, hairlines rather than fills to tell surfaces apart, a
 * five-step neutral ink ramp, and one filled control that is WHITE with a
 * BLACK label. The first block below carries those values under the public
 * file's own names, so a diff against styles.css is a diff of names that
 * match. Hand-written; nothing generates this file.
 *
 * WHY THE PURPLE WENT (owner, 2026-09-27: "the outdated purple theme"). This
 * file was written on 2026-08-29 against a tkati.com that was near-black with
 * a purple accent. The site has since taken the hue out entirely — its
 * --brand-1 is #FFFFFF, its greys lost their lilac lean, and green survives
 * only as a dev-only alternative. The admin kept the old accent (#B57BF5 /
 * #9A5CF3 / #7038DC) and lilac greys (#08070A, #F2F0F4, #A39FAB), so it read
 * as a different, older product than the site a client had just left. White
 * on #9A5CF3 also measured 4.04:1, under the 4.5:1 floor for every filled
 * button in the office.
 *
 * COLOUR NOW MEANS STATE, AND ONLY STATE. Emphasis is luminance: brighter is
 * more important, a boundary is a hairline, the focus ring and the active
 * marker are white. The only hues left are the three states below — green for
 * healthy or live, amber for needs attention, red for failed, overdue or
 * destructive — plus a muted grey for inactive. They separate from each other
 * by only 1.41-1.60:1 in luminance, so a state is ALWAYS also said in words;
 * the hue agrees with the word, it never replaces it. No hue is decoration.
 *
 * THE OLD NAMES ARE KEPT AS ROLES. app.css, office.css, ads.css, ebay.css and
 * portal.css read `--paper`, `--ink`, `--teal`, `--aqua` and the rest, and
 * every one of those names still exists below, re-pointed. They never
 * described their colours (`--teal` was purple, `--aqua` was lilac), and they
 * do not now: read `--aqua` as "the accent" (white), `--teal-soft` as "the
 * filled control" (white), `--teal` as "the filled control, pressed"
 * (#EDEDED), `--paper` as "the ground" (#070707).
 *
 * MEASURED (WCAG 2.x relative luminance; an alpha is composited over the
 * surface it actually sits on before it is measured; script kept with the
 * theme work). Levels composite to canvas #070707, L1 #101010, L2 #151515,
 * L3 #1B1B1B, hover #131313.
 *   ink        canvas   L1     L2     L3
 *   #FFFFFF    20.14  19.07  18.32  17.25
 *   #E6E6E6    16.14  15.28  14.68  13.82   body
 *   #C8C8C8    12.04  11.40  10.95  10.31
 *   #A3A3A3     7.99   7.56   7.26   6.84   secondary
 *   #8B8B8B     5.91   5.60   5.38   5.06   the muted default
 *   #7E7E7E     4.96   4.70   4.51   4.25   the floor; NEVER on L3 (4.25)
 *   label #0A0A0A on the white fill 19.80, on its hover #EDEDED 16.91,
 *   pressed #DADADA 14.16. Focus ring #FFFFFF 20.14 on the canvas, 17.25 on
 *   L3. Selection: #FFFFFF on the .32 white wash 7.30.
 *   Hairlines against the surface they cross: .06 1.11, .10 1.23 (both
 *   decorative only), .36 3.22 (the ONLY line allowed to be a control's sole
 *   boundary, WCAG 1.4.11), .55 6.26.
 *   States, ink on canvas/L1/L3: green #63B78C 8.33/7.89/7.13; amber #E8C07A
 *   11.75/11.13/10.07; red #F2837A 7.96/7.54/6.82. On their own washes:
 *   green 7.42, amber 10.16, red 7.23. Marks (dots, edges, bars) need 3:1:
 *   #2E8B63 4.79/4.10 (canvas/L3), #C9973F 7.66/6.56, #E5534B 5.44/4.66.
 *   #0A0A0A on an amber badge #C9973F 7.53, on a red fill #F2837A 7.83.
 */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-tight-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

:root {
  /* THE PAGE IS DARK, AND SAYS SO. Without this the browser draws every
     native control it owns (a <select>, a checkbox, a scrollbar, a date
     picker) in its LIGHT scheme: on Requests each row's state select was a
     full-width white bar, the loudest thing on the screen, and the Ads
     access checkboxes were white squares (review, 2026-09-28). account.css,
     office-home.css and infrastructure.css already declared it for their own
     pages; every page that loads this file gets it here. */
  color-scheme: dark;

  /* ── THE PUBLIC SYSTEM, BY ITS OWN NAMES (assets/styles.css §0) ─────────── */
  --bg:         #070707;                  /* the canvas: page, rail, top bar   */
  --bg-2:       #0C0C0C;
  --bg-3:       #131313;
  --surface-1:  rgba(255, 255, 255, 0.035);   /* L1: a field, a chip at rest   */
  --surface-2:  rgba(255, 255, 255, 0.055);   /* L2: a control, a row on hover */
  --surface-3:  rgba(255, 255, 255, 0.08);    /* L3: the active row            */
  --hover:      rgba(255, 255, 255, 0.05);
  --hair-1:     rgba(255, 255, 255, 0.06);    /* structural, decorative        */
  --hair-2:     rgba(255, 255, 255, 0.10);    /* a container's edge            */
  --hair-3:     rgba(255, 255, 255, 0.36);    /* a CONTROL's edge — 3.22:1     */
  --hair-4:     rgba(255, 255, 255, 0.55);    /* focus-within, active — 6.26:1 */
  --text-hi:    #FFFFFF;
  --text:       #E6E6E6;
  --text-2:     #C8C8C8;
  --muted:      #A3A3A3;
  --muted-2:    #8B8B8B;
  --muted-3:    #7E7E7E;
  --brand-1:    #FFFFFF;                  /* focus ring, active marker          */
  --brand-2:    #C8C8C8;
  --brand-rgb:  255 255 255;              /* alpha uses read white, not a hue   */
  --grad:       linear-gradient(135deg, #FFFFFF 0%, #EDEDED 55%, #DADADA 100%);
  --on-grad:    #0A0A0A;                  /* the label on the white fill        */
  /* The monogram is a violet raster; this crushes it to white and fades it
     below the words beside it, exactly as the public top bar does. */
  --mark-filter:  brightness(0) invert(1);
  --mark-opacity: 0.62;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── STATE — the only colour in the admin ─────────────────────────────────
     INK is for text, MARK for a dot, an edge or a bar, RGB for a wash. The
     green is tkati.com's own (styles.css [data-accent="green"]); the amber is
     the value office-home.css and account.css already use for attention. */
  --ok:         #63B78C;                  /* healthy, live, done                */
  --ok-mark:    #2E8B63;
  --ok-rgb:     46 139 99;
  --attn:       #E8C07A;                  /* needs attention                    */
  --attn-mark:  #C9973F;
  --attn-rgb:   232 192 122;
  --bad:        #F2837A;                  /* failed, overdue, destructive       */
  --bad-mark:   #E5534B;
  --bad-rgb:    229 83 75;
  --inactive:   #7E7E7E;                  /* off, not applicable, unknown       */

  /* ── THE ROLE NAMES, RE-POINTED ─────────────────────────────────────────── */
  /* GROUND */
  --paper:        var(--bg);
  --paper-2:      var(--bg-2);
  --paper-3:      var(--bg-3);
  --paper-hi:     #1B1B1B;                /* L3, solid                          */
  --paper-rgb:    7 7 7;
  --paper-2-rgb:  12 12 12;
  --surface:      var(--surface-1);
  --matte:        var(--paper);
  --white:        #FFFFFF;

  /* INK */
  --ink:          var(--text);
  --ink-rgb:      230 230 230;
  --stone:        var(--muted);
  --faint:        var(--muted-3);
  --bone:         var(--text);
  --bone-rgb:     230 230 230;
  --bone-line:    var(--hair-2);
  /* Solid, not rgb(bone / .70): an alpha ink lands on a different grey on
     every surface it crosses. */
  --bone-mute:    var(--muted);
  --acid:         var(--text-hi);
  --acid-hi:      var(--text-hi);
  --acid-rgb:     255 255 255;

  /* THE ACCENT, which is no longer a hue. --aqua* is the accent itself;
     --teal* is the one filled control and its hover and pressed steps. */
  --teal:           #EDEDED;              /* the white fill, hovered or pressed */
  --teal-deep:      #DADADA;
  --teal-soft:      #FFFFFF;              /* THE filled control                 */
  --teal-rgb:       255 255 255;
  --teal-soft-rgb:  255 255 255;
  --teal-tint-rgb:  200 200 200;
  --aqua:           var(--brand-1);       /* focus ring, active marker, link    */
  --aqua-deep:      var(--brand-2);
  --aqua-rgb:       var(--brand-rgb);
  --aqua-deep-rgb:  200 200 200;
  --accent:         var(--aqua);
  --accent-soft:    var(--teal-soft);
  --on-accent:      var(--on-grad);

  /* BANDS. The public system has no level below its canvas, so the deepest
     band IS the canvas; the lifted ones are its legacy #0C0C0C / #131313 and
     the L3 grey. */
  --ground:       var(--bg);
  --slate:        var(--bg-3);
  --slate-2:      var(--bg-2);
  --slate-deep:   var(--bg);
  --deep-1:       #1B1B1B;
  --deep-2:       var(--bg-3);
  --deep-3:       var(--bg-2);
  --shade-rgb:    0 0 0;

  /* SIGNAL — the attention family. Was a terracotta orange (#F0A462) that
     sat beside the purple; it is the amber state now, nothing warmer. */
  --heat:          var(--attn);
  --heat-deep:     var(--attn-mark);
  --heat-soft:     var(--attn);
  --heat-rgb:      var(--attn-rgb);
  --heat-soft-rgb: var(--attn-rgb);
  --on-heat:       #0A0A0A;               /* 11.55:1 on --attn                  */
  --warn:          var(--attn);

  /* SURFACES — white alpha over the canvas, never a tinted slab. */
  --glass:        var(--surface-1);
  --glass-edge:   var(--hair-2);
  --glass-strong: var(--surface-2);
  --glass-ring:   var(--hair-1);
  --glass-grad:   none;
  --line:         var(--hair-2);
  --line-2:       var(--hair-3);          /* the control boundary               */
  --line-warm:    var(--hair-2);          /* was a purple hairline              */
  --matte-line:   var(--hair-1);

  /* Exactly the public file's two shadows; --sh-sm has no counterpart there. */
  --sh-sm: none;
  --sh:    0 2px 12px rgba(0, 0, 0, 0.28);
  --sh-lg: 0 16px 48px -24px rgba(0, 0, 0, 0.9);

  --blur: none;                           /* no glass                           */
  --r:    8px;
  --r-sm: 5px;
  --r-lg: 12px;

  /* TYPE — the public pairing. Inter Tight for display, Inter for body,
     JetBrains Mono (above) for machine text only: labels, counters, ids. */
  --display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.18rem, 1.09rem + 0.44vw, 1.46rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.75vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.85rem + 3.2vw, 4.6rem);
  --step-5:  clamp(3.1rem, 1.95rem + 5.8vw, 7.2rem);

  --t-h: 1.25rem;
  --t-0: var(--step-0);
  --t-1: 0.95rem;
  --t-2: 0.87rem;
  --t-3: 0.80rem;
  --t-4: 0.72rem;
  --t-5: 0.65rem;

  /* LAYOUT */
  --max:        1320px;
  --max-narrow: 820px;
  --gutter:     clamp(1.15rem, 4vw, 3.5rem);
  --nav-h:      82px;
  --thread-x:   calc(max(0px, (100% - var(--max)) / 2) + var(--gutter) / 2);
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* The public selection: a white wash, white text — 7.30:1. Was the browser's
   own blue, the one hue on the page nobody chose. */
::selection { background: rgb(var(--brand-rgb) / 0.32); color: var(--text-hi); }