/* ============================================================================
   arel — tokens.css · THE ONLY FILE ALLOWED TO CONTAIN A RAW HEX OR RGB TRIPLET
   Identical copy in BOTH trees (byte-for-byte):
     /home/arel/web/public_html/css/tokens.css    (canonical; linked before styles.css)
     /home/arel/admin/public_html/css/tokens.css  (streamed by Router::serveAsset() ahead of admin.css)
   Drift guard: /home/arel/web/tools/check-tokens.sh (cmp -s). No build step.
   Font files (variable, one per family+subset; the "400" in the name is historical):
     /fonts/archivo-400-latin.woff2  /fonts/archivo-400-latin-ext.woff2
     /fonts/jetbrainsmono-400-latin.woff2  /fonts/jetbrainsmono-400-latin-ext.woff2
   ========================================================================== */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/archivo-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/archivo-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/fonts/jetbrainsmono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/fonts/jetbrainsmono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
  /* ---- 1. channels: use only as rgb(var(--x-rgb) / a) ------------------ */
  --ink-rgb:   14 17 22;
  --steel-rgb: 173 196 224;
  --amber-rgb: 255 158 44;
  --white-rgb: 255 255 255;

  /* ---- 2. surfaces: recessed -> raised, every step >= 1.10:1 ----------- */
  --bg-2:    #0b0e13;                 /* recessed alt section */
  --bg:      #0e1116;                 /* graphite sheet */
  --panel:   #161e29;                 /* card / rail hover  (1.13:1 over bg) */
  --panel-2: #1c2634;                 /* raised / menu / thead (1.10:1 over panel) */
  --well:    rgb(8 11 16 / .6);       /* sunken input ground */

  /* ---- 3. ink: 15.9 / 8.5 / 5.9 :1 on --bg; --faint is TEXT-SAFE (AA) --- */
  --text:      #e6ecf5;
  --muted:     #9fb0c6;
  --faint:     #8494aa;
  --on-accent: #1a1206;               /* ink on amber, 9:1 */
  --deco:      rgb(var(--steel-rgb) / .30);   /* NON-TEXT ghost strokes: separators, watermark stroke */

  /* ---- 4. strokes: construction line / drawn edge / control boundary ---- */
  --line:   rgb(var(--steel-rgb) / .14);
  --line-2: rgb(var(--steel-rgb) / .26);
  --line-3: rgb(var(--steel-rgb) / .45);      /* 3.0:1 — the ONLY border for inputs/ghost buttons/chips */
  --sheen:  rgb(var(--white-rgb) / .018);

  /* ---- 5. signal: amber has FOUR roles — action, current, unread/owed, el trazo */
  --accent:      #ff9e2c;
  --accent-2:    #ffb55c;
  --accent-soft: rgb(var(--amber-rgb) / .12);
  --accent-glow: rgb(var(--amber-rgb) / .30);
  --steel:       #5fa0c8;                      /* cool counterpoint: code, verification, DEV env */
  --steel-soft:  rgb(95 160 200 / .12);
  --steel-text:  #8cc0e0;
  --grad:        linear-gradient(135deg, var(--accent-2), var(--accent));

  /* ---- 6. status: brand-derived; *-text >= 4.9:1 on every surface; warn is yellow, never amber */
  --ok:   #4cc38a; --ok-text:   #7fdcae; --ok-soft:   rgb(76 195 138 / .12);
  --err:  #e8554b; --err-text:  #ff8a80; --err-soft:  rgb(232 85 75 / .12);
  --warn: #f2d15c; --warn-text: #f2d15c; --warn-soft: rgb(242 209 92 / .12);
  --info: var(--steel); --info-text: var(--steel-text); --info-soft: var(--steel-soft);

  /* ---- 7. type ---------------------------------------------------------- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Archivo", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-2xs:     .72rem;                                   /* 11.5px: eyebrow, register numbers, th */
  --fs-xs:      .8rem;                                    /* 12.8px: meta, breadcrumb, nav, btn, labels — the mono floor */
  --fs-sm:      .9rem;                                    /* 14.4px: stat labels, tags, code */
  --fs-base-sm: .96rem;                                   /* 15.4px: card p, footer links, inputs */
  --fs-body:    1.0625rem;                                /* 17px */
  --fs-lead:    clamp(1.15rem, .95rem + .9vw, 1.4rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h1:      clamp(2.5rem, 1.5rem + 4.2vw, 4.4rem);    /* page-head + blog-head */
  --fs-poster:  clamp(2.75rem, 1.2rem + 6vw, 6.6rem);     /* hero h1 only */
  --fs-numeral: clamp(3.5rem, 2rem + 6vw, 8rem);          /* stroked sheet numerals */
  --lh-display: 1.02; --lh-heading: 1.2; --lh-body: 1.6; --lh-prose: 1.65;
  --ls-display: -.022em; --ls-mono: .04em; --ls-label: .1em; --ls-eyebrow: .18em;
  --fw-display: 800; --fw-heading: 700; --fw-label: 600; --fw-body: 400;

  /* ---- 8. space: 4px grid + section rhythm ------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;
  --sec-y:       clamp(var(--sp-8), 7vw, 112px);           /* above a headed block */
  --sec-y-deep:  clamp(var(--sp-9), 10vw, var(--sp-11));   /* below it */
  --sec-y-tight: clamp(var(--sp-6), 4vw, var(--sp-7));
  --col-gap:     clamp(16px, 2.5vw, 32px);                 /* 12-column sheet gutter */
  --gutter:      clamp(20px, 5vw, 64px);
  --maxw:        1200px;
  --maxw-wide:   1440px;                                   /* hero, features, footer */
  --maxw-narrow: 760px;                                    /* legal, prose */
  --header-h:    72px;
  --control-h:   44px;                                     /* min tap target */
  --tick:        6px;                                      /* registration tick arm */

  /* ---- 9. shape: the sheet is sharp; only dots and avatars are round ------ */
  --radius: 0;
  --radius-round: 50%;

  /* ---- 10. depth: one soft drop, one plotter offset, one glow ------------ */
  --shadow-1:    0 1px 2px rgb(0 0 0 / .4);
  --shadow-2:    0 24px 60px -34px rgb(0 0 0 / .9);
  --shadow-hard: 4px 4px 0 -1px var(--accent-glow);        /* primary button */
  --shadow-hard-hover: 6px 6px 0 -1px rgb(var(--amber-rgb) / .34);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 26px 56px -40px var(--accent-glow);

  /* ---- 11. motion: four tempos, two curves ------------------------------- */
  --dur-1: 120ms;   /* colour, border, background */
  --dur-2: 200ms;   /* lifts, underlines, menus */
  --dur-3: 480ms;   /* reveals, page sweep, header settle */
  --dur-4: 900ms;   /* draws: measure line, count-up */
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-sweep: cubic-bezier(.7, 0, .2, 1);

  /* ---- 12. layers -------------------------------------------------------- */
  --z-header: 60; --z-menu: 70; --z-bar: 90; --z-progress: 120; --z-skip: 200;

  /* ---- 13. drafting grid texture (moved verbatim from styles.css) -------- */
  --grid-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23adc4e0' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M96 0H0V96'/%3E%3C/g%3E%3Cg fill='none' stroke='%23adc4e0' stroke-opacity='0.045' stroke-width='1'%3E%3Cpath d='M24 0V96M48 0V96M72 0V96M0 24H96M0 48H96M0 72H96'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='1.3' fill='%23adc4e0' fill-opacity='0.16'/%3E%3Ccircle cx='96' cy='0' r='1.3' fill='%23adc4e0' fill-opacity='0.16'/%3E%3Ccircle cx='0' cy='96' r='1.3' fill='%23adc4e0' fill-opacity='0.16'/%3E%3Ccircle cx='96' cy='96' r='1.3' fill='%23adc4e0' fill-opacity='0.16'/%3E%3C/svg%3E");
}

/* Tool density — the admin sets data-density="tool" on <html>. Same tokens, tighter scale. */
:root[data-density="tool"] {
  --fs-body:  .906rem;      /* 14.5px, identical to today: no table reflows */
  --fs-lead:  .9rem;
  --fs-h1:    clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  --fs-h2:    1.08rem;
  --fs-h3:    .95rem;
  --lh-body:  1.5;
  --control-h: 34px;
  --row-h:    40px;         /* ledger row */
  --gutter:   32px;
  --maxw:     1500px;
  --header-h: 0px;          /* no topbar */
}

/* Base every property gets for free — utilities the views already reference */
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--primary:focus-visible { outline-color: var(--on-accent); outline-offset: -3px; }
.small { font-size: var(--fs-xs); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono  { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.sr    { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }