/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS · crypto signals landing · direction 02 "Card"
   ───────────────────────────────────────────────────────────────────────────
   The single source of truth. The site imports THIS FILE; brand.html reads its
   values back at runtime and renders them. Change a value here and the sheet
   and the site both follow. Never type a token value anywhere else.

   Every value below was lifted from the approved hero (mocks/02-card), not
   re-invented, so the sheet and the thing the client said yes to agree.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── COLOUR ───────────────────────────────────────────────────────────────
     Two colours and no accent hue. That absence IS the direction: the page is
     porcelain and ink, and the only thing with any shine on it is the card.

     So "accent" here is a role, not a colour. It is ink, FILLED. The one action
     on the page is the only solid ink shape anywhere. Everything else is a
     hairline or type. Hold that and the button never needs a colour to win.
     ──────────────────────────────────────────────────────────────────────── */

  --bg:            #e6eaee;  /* porcelain: the page ground */
  --surface:       #f4f6f8;  /* lit porcelain: panels, and the pool of light behind the card */
  --surface-2:     #dde2e7;  /* recessed band */

  --text-1:        #0e1a2b;  /* ink */
  --text-2:        #55606f;  /* second voice: the grey half of the headline, sub copy, labels */

  --border:        #c6cdd5;  /* hairlines: the spec table, the footer rule */
  --border-strong: #737d89;  /* edges that identify a CONTROL. Held to 3:1. */

  --accent:        #0e1a2b;  /* ink, filled: the one action and nothing else */
  --accent-ink:    #e6eaee;  /* porcelain type on the filled action */
  --accent-quiet:  #dde2e7;  /* hover ground for a quiet control */

  --positive:      #136b3e;  /* a call that closed up. Type only, never a fill. */
  --negative:      #a3221b;  /* a call that closed down. Same weight as positive: the record is not a scoreboard */
  --warning:       #7a5200;  /* risk notes */

  --focus:         var(--accent);
  --selection:     #cfd6de;

  /* ── MATERIAL ─────────────────────────────────────────────────────────────
     There is no photography and no illustration. There is one material,
     brushed titanium, and it is made here. It appears once per view at most.
     If a second metal object shows up on a screen, one of them is wrong.
     ──────────────────────────────────────────────────────────────────────── */

  --metal:        linear-gradient(112deg, #cfd5db 0%, #f3f5f7 17%, #b3bbc4 37%, #eceff2 54%, #a3acb6 73%, #d9dee3 100%);
  --metal-brush:  repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, rgb(14 26 43 / 0.045) 1px 2px);
  --metal-ink:    rgb(14 26 43 / 0.74);           /* letters cut into the metal */
  --metal-deboss: 0 1px 0 rgb(255 255 255 / 0.65); /* their lower edge catching light */
  --metal-edge:   inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(14 26 43 / 0.18);  /* the bevel: top edge lit, bottom edge in shade */
  --metal-band:   linear-gradient(180deg, #4f5863, #2f3640 55%, #454d57);  /* the back's stripe: the same titanium, anodised dark (Ghady's call, 2026-09-19: the card turns over) */

  /* The engraving, as shares of the card's own width. The card is a size
     container, so cqi here means "of this card": the lettering keeps its
     proportions wherever the card appears and at whatever size. The two floors
     keep the small caps legible when the card is phone-sized. Measured off the
     approved hero, where the card is 480px wide. Added 2026-09-19: the first
     extraction missed the bevel and the engraving. */
  --engrave-inset:    5.667cqi;             /* 27px at 480 */
  --engrave-name:     max(0.6rem, 2.5cqi);  /* 12px at 480, never under 9.6 */
  --engrave-small:    max(0.5rem, 2.083cqi); /* 10px at 480, never under 8 */
  --engrave-number:   6.333cqi;             /* 30px at 480 */
  --tracking-engrave: 0.2em;

  /* The scan (Ghady's calls, 2026-09-19, after the 21st.dev ScannerCardStream):
     a spectrum beam crosses the card and the engraving behind it breaks into
     holographic code. The only glow on the site and the only colour: the page
     itself still has no accent hue, and at rest the card is plain titanium.
     The holographic hues exist for the scan and nothing else. */
  --holo-violet: hsl(265 85% 62%);
  --holo-pink:   hsl(325 85% 60%);
  --holo-orange: hsl(25 95% 58%);
  --holo-yellow: hsl(48 95% 55%);
  --holo-green:  hsl(150 70% 48%);
  --holo-cyan:   hsl(190 85% 50%);
  --holo-blue:   hsl(222 90% 60%);

  --scan-width:      3px;
  --scan-glow-width: 28px;
  --scan-blur:       12px;
  --scan-spectrum:   linear-gradient(to bottom, transparent, var(--holo-violet) 12%, var(--holo-pink) 26%, var(--holo-orange) 40%, var(--holo-yellow) 52%, var(--holo-green) 64%, var(--holo-cyan) 76%, var(--holo-blue) 88%, transparent);
  --scan-halo:       0 0 8px var(--holo-violet), 0 0 20px hsl(265 85% 62% / 0.6), 0 0 44px hsl(240 80% 60% / 0.45);
  /* The beam's hues laid end to end and back to violet, so the band repeats
     without a seam: what runs through a Request access button under the
     pointer (Ghady's call, 2026-09-19). */
  --holo-rainbow:    linear-gradient(90deg, var(--holo-violet), var(--holo-pink), var(--holo-orange), var(--holo-yellow), var(--holo-green), var(--holo-cyan), var(--holo-blue), var(--holo-violet));
  /* The code's hues, a shade deeper than the beam's so the characters still
     read on the light metal. The ground's lines take the same hues while the
     card shows its code. */
  --holo-code-violet: hsl(265 75% 52%);
  --holo-code-pink:   hsl(325 75% 50%);
  --holo-code-orange: hsl(20 85% 50%);
  --holo-code-yellow: hsl(40 90% 42%);
  --holo-code-green:  hsl(160 70% 34%);
  --holo-code-cyan:   hsl(192 80% 38%);
  --holo-code-blue:   hsl(222 80% 50%);
  --scan-holo:       linear-gradient(112deg, var(--holo-code-violet), var(--holo-code-pink) 20%, var(--holo-code-orange) 38%, var(--holo-code-yellow) 50%, var(--holo-code-green) 64%, var(--holo-code-cyan) 80%, var(--holo-code-blue));
  --scan-fade:       linear-gradient(to right, #000 0%, rgb(0 0 0 / 0.8) 30%, rgb(0 0 0 / 0.6) 50%, rgb(0 0 0 / 0.4) 80%, rgb(0 0 0 / 0.2) 100%);  /* a mask: the code thins to the right */

  /* The ground (Ghady's call, 2026-09-19, after the 21st.dev Background Paths):
     thin lines of ink drifting behind the hero. No new colour: they are
     --text-1 at the reference's own strengths. This is a mask alpha: the lines
     at full strength, where they fade in under the header on a phone. */
  --ground-full:  #000;

  /* Night (Ghady's call, 2026-09-21: "the website looks very plain and dead").
     How it works and the record sit on ink, so the page runs light, dark,
     light. Inside a band the page's own roles take these values; the metal
     keeps its day colours. */
  --night-bg:     var(--text-1);             /* the band: ink */
  --night-text-1: var(--bg);                 /* porcelain type on it */
  --night-text-2: #97a3b1;                   /* the second voice on ink: 6.8:1 */
  --night-border: rgb(230 234 238 / 0.16);   /* hairlines on ink */

  /* ── TYPEFACES ────────────────────────────────────────────────────────────
     Two families. Hanken Grotesk carries display AND body, light, so the page
     whispers. Fragment Mono carries every label and every number, because a
     signal is data and should look like it was measured.

     LICENSING: both are SIL Open Font License, free commercially. For launch,
     self-host and subset them (web-build baseline); the Google link in the
     mock and the sheet is for building only.
     ──────────────────────────────────────────────────────────────────────── */

  --font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-data:    "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;

  --weight-display: 300;
  --weight-body:    400;
  --weight-bold:    500;   /* the wordmark, and nothing heavier exists */

  /* ── TYPE SCALE ───────────────────────────────────────────────────────────
     Fluid between 320px and 1240px. --step-7 is the hero line only and is the
     mock's own clamp, untouched.
     ──────────────────────────────────────────────────────────────────────── */

  --step--1: clamp(0.833rem, 0.810rem + 0.116vw, 0.900rem);  /* 13 → 14 */
  --step-0:  clamp(1.000rem, 0.957rem + 0.217vw, 1.125rem);  /* 16 → 18 */
  --step-1:  clamp(1.200rem, 1.128rem + 0.359vw, 1.406rem);  /* 19 → 23 */
  --step-2:  clamp(1.440rem, 1.329rem + 0.553vw, 1.758rem);  /* 23 → 28 */
  --step-3:  clamp(1.728rem, 1.565rem + 0.816vw, 2.198rem);  /* 28 → 35 */
  --step-4:  clamp(2.074rem, 1.840rem + 1.171vw, 2.747rem);  /* 33 → 44 */
  --step-5:  clamp(2.488rem, 2.159rem + 1.643vw, 3.433rem);  /* 40 → 55 */
  --step-6:  clamp(2.986rem, 2.532rem + 2.270vw, 4.291rem);  /* 48 → 69 */
  --step-7:  clamp(2.500rem, 5.6vw, 5.400rem);               /* 40 → 86, the hero line */

  --label:   0.6875rem;   /* 11px: mono labels, kicker, footer */

  --leading-tight: 1.0;    /* display: set solid, the light weight can take it */
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-display: -0.035em;
  --tracking-caps:     0.12em;   /* mono labels */
  --tracking-mark:     0.34em;   /* the wordmark, and the name on the card */

  /* ── MOTION REGISTER ──────────────────────────────────────────────────────
     Metal does not bounce. Nothing on this site overshoots. Things arrive once
     and settle; after that the card moves only when a hand is on it: tilting
     under the pointer, and a scan line crossing it when clicked.
     --ease-signature is that settle. The light that used to slide across the
     metal was taken out on Ghady's call, 2026-09-19. One thing moves on its own
     and never stops: the lines drifting in the ground behind the page, slowly,
     each over its own time (Ghady's call, 2026-09-19, after the 21st.dev
     Background Paths).
     ──────────────────────────────────────────────────────────────────────── */

  --ease-entrance:  cubic-bezier(0.16, 1.00, 0.30, 1.00);  /* fast out, long settle */
  --ease-exit:      cubic-bezier(0.70, 0.00, 0.84, 0.00);
  --ease-move:      cubic-bezier(0.65, 0.00, 0.35, 1.00);
  --ease-signature: cubic-bezier(0.22, 1.00, 0.36, 1.00);  /* the card tilting: heavier, no overshoot */
  --ease-scan:      linear;                                  /* the scan: a scanner moves at one speed */
  --ease-drift:     linear;                                  /* the ground's lines: no start, no stop */
  --ease-flow:      linear;                                  /* the rainbow running through a hovered button */

  --dur-1: 150ms;    /* micro: hover, focus, the card following the pointer */
  --dur-2: 300ms;    /* standard: a control filling, a row opening */
  --dur-3: 500ms;    /* the card settling back, and reveals on scroll */
  --dur-4: 1200ms;   /* entrances, once: the copy, then the card; and the card's scan */

  --dur-drift:        20s;  /* the ground: one pass of a line, at its quickest... */
  --dur-drift-spread: 10s;  /* ...and how much slower the slowest line is */
  --dur-flow:         3s;   /* the rainbow, once round a hovered button */
  --dur-pulse:        5s;   /* a light runs the call's rail, rests, runs again (Ghady's call, 2026-09-21) */

  /* ── LAYOUT ───────────────────────────────────────────────────────────────
     Emptiness is the expensive part. Density dial is 2: when in doubt, remove.
     Breakpoints (literal in the stylesheet, custom properties do not work in
     @media):  sm 480px · md 860px (the hero stacks here) · lg 1100px · xl 1320px
     ──────────────────────────────────────────────────────────────────────── */

  --space-3xs: 0.25rem;   /*   4 */
  --space-2xs: 0.5rem;    /*   8 */
  --space-xs:  0.75rem;   /*  12 */
  --space-s:   1rem;      /*  16 */
  --space-m:   1.5rem;    /*  24 */
  --space-l:   2rem;      /*  32 */
  --space-xl:  3rem;      /*  48 */
  --space-2xl: 4rem;      /*  64 */
  --space-3xl: 6rem;      /*  96 */
  --space-4xl: 9rem;      /* 144: between sections. Generous on purpose. */

  --radius-s:    4px;
  --radius-m:   10px;
  --radius-l:   18px;     /* the card */
  --radius-full: 999px;   /* every action is a pill */

  --measure:      62ch;   /* running copy */
  --measure-lede: 38ch;   /* the line under a headline */
  --gutter:       clamp(1.25rem, 4.5vw, 4rem);
  --page-max:     1320px;

  --border-width: 1px;

  /* ── ELEVATION ────────────────────────────────────────────────────────────
     Only the card floats. Panels are flat and separated by hairlines.
     ──────────────────────────────────────────────────────────────────────── */

  --shadow-1: 0 1px 2px rgb(14 26 43 / 0.06);
  --shadow-2: 0 8px 24px -12px rgb(14 26 43 / 0.18);
  --shadow-3: 0 46px 80px -34px rgb(14 26 43 / 0.45), 0 16px 28px -16px rgb(14 26 43 / 0.32);  /* the card */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
}