/* ==========================================================================
   VIGZMAS DESIGN SYSTEM  ·  "Paper and Foil"  ·  tokens
   The chrome is deep teal and matte. What is written TO the player (the letter, the reply slip, the result) is dim parchment with ink (css/paper.css). Gold is light on the dark and foil on the paper.
   Dark only. Mobile first: designed at 390 px wide, fluid from 320 to 768 px, a centred column beyond.
   Everything is prefixed --hl- (properties) and hl- (classes). The source of every value is tools/v2/comps/f1/SPEC.md section 3 (the f1 names map to the app's as SPEC 12 says:
   --hl-bg = night, --hl-surface = s1, --hl-surface-raised = s2, --hl-surface-inset = ink-0, --hl-text = cream, --hl-text-muted, --hl-text-faint; every other f1 token is --hl- + its f1 name).
   Text colours are solid hex so contrast is predictable (tests/app/ui/a11y.test.mjs measures every pair from rendered pixels).
   ========================================================================== */
@property --hl-grain-night { syntax: '<url>'; inherits: true; initial-value: url(../art/ui/grain-night.webp); }
@property --hl-tooth-paper { syntax: '<url>'; inherits: true; initial-value: url(../art/ui/tooth-paper.webp); }
:root {
  color-scheme: dark;

  /* ---- surfaces: the ladder (OKLCH hue 232 to 242, chroma .031 to .052) */
  --hl-surface-inset: #071722;        /* ink-0: wells, the tab bar, the pinned bars, field wells */
  --hl-bg: #0A1E2C;                   /* night: the page */
  --hl-surface: #0F2D3E;              /* s1: cards, doors, the facade, the meter, the summary, bubbles, sheets */
  --hl-s1-hi: #143448;                /* one step up from s1: the top of a door's card stock, the top of a picture that has not arrived */
  --hl-surface-raised: #14394B;       /* s2: raised: the selected segment, the selected face, your bubble, the avatar disc */
  --hl-s3: #204253;                   /* sheets and dialogs only */
  --hl-sky-top: #0F2B3C;              /* the top of the sky: it eases into the night over 420 px (one hue family: no violet, that belongs to the paintings) */

  /* ---- text on the night (solid hex) */
  --hl-text: #FFF3DA;                 /* Snow Cream: text */
  --hl-text-muted: #C8C2B3;           /* secondary text, captions, labels, unselected segments, later-door numerals */
  --hl-text-faint: #94A8AB;           /* placeholders and disabled only, never on s3 */
  --hl-tab-off: #9FB0B3;              /* an inactive tab */
  --hl-rank-2: #D9DEE3;               /* rank numerals 2 and 3 (text only; rank 1 is gold) */
  --hl-rank-3: #E0A070;
  --hl-wash: rgba(255, 243, 218, .08);            /* a quiet fill: a disabled or locked control */
  --hl-gold-wash: rgba(255, 210, 122, .08);       /* the tint of your own row in a list */
  --hl-cream-wash-6: rgba(255, 243, 218, .06);    /* the lift of the dock over its card */
  --hl-scrim: rgba(4, 12, 18, .72);               /* behind a sheet or a dialog */
  --hl-dots: rgba(255, 243, 218, .30);            /* a perforation dot, a sheet's grab handle */
  --hl-dots-off: rgba(255, 243, 218, .20);        /* the perforation of a ticket that cannot be played */
  --hl-fade: linear-gradient(180deg, rgba(10, 30, 44, 0) 0, rgba(10, 30, 44, .9) 40%, var(--hl-bg) 70%, var(--hl-bg) 100%);   /* the 16 px gradient over the foot of the page, above the bars: opaque from 70 percent, so nothing of the next line shows at its foot */
  --hl-fade-h: 16px;

  /* ---- light */
  --hl-accent-gold: #FFD27A;          /* Lantern Gold: the one primary (flat), lit things, links, the focus ring */
  --hl-accent-amber: #F4A93B;         /* Window Amber: a missed day's ring and 6 px dot, the notice icon */
  --hl-lit: radial-gradient(circle at 50% 40%, #F8CB72 0, #F3BF5E 50%, #E49C36 100%);   /* the lit glass of TODAY's door: the only lit gradient; its brightest point is below the Play button's gold */
  --hl-lit-pane: linear-gradient(180deg, #E6BB66, #C48B30);          /* a played door and a played arch: a lit pane in its card-stock door */
  --hl-bulb: linear-gradient(180deg, #F8CB72, #E49C36);              /* a bulb of the games' time bar: the lit glass without its shine (the bar keeps its bulbs and loses its glow, SPEC 12) */
  --hl-shimmer: linear-gradient(90deg, transparent 0, rgba(255, 243, 218, .11) 50%, transparent 100%);          /* the band of light that slides over a placeholder while something loads (moved by transform, never by background-position) */
  --hl-shimmer-paper: linear-gradient(90deg, transparent 0, rgba(255, 252, 240, .35) 50%, transparent 100%);    /* the same on paper */
  --hl-spill: radial-gradient(closest-side, rgba(244, 169, 59, .20), rgba(244, 169, 59, .09) 42%, rgba(244, 169, 59, .03) 66%, rgba(244, 169, 59, 0) 82%);   /* the one glow of a screen, behind today's door */

  /* ---- cranberry: the Play ticket, and the 10 px unread dot. Never text. */
  --hl-cranberry: #C0354E;            /* the unread dot only */
  --hl-cran-card: #8F2038;            /* the ticket's card stock */
  --hl-on-cran: #FFF3DA;              /* the ticket's title: 7.85:1 */
  --hl-on-cran-2: #F0D6C6;            /* its meta line: 6.2:1 */
  --hl-on-gold: #5A1425;              /* the word "Play" on the gold pill: 9.45:1 */

  /* ---- status (text and icons on dark; pine is only ever a graphic) */
  --hl-pine: #3F8A62;
  --hl-success: #87D9AA;
  --hl-danger: #FAA2A7;               /* a refused field and its message (rose) */
  --hl-info: #A0D4E7;
  --hl-warning: #F4A93B;

  /* ---- lines: EVERY 1 px line in the system has a name. A ring is a box-shadow, so layout never moves; -in is its inset twin; a rule is a one-sided hairline. */
  --hl-hair: rgba(255, 243, 218, .12);               /* the one resting edge */
  --hl-hair-ctl: rgba(255, 243, 218, .50);           /* an edge that identifies a control (secondary button, field, PIN cell, segment well): 4.78 to 4.87:1 */
  --hl-hair-gold: rgba(255, 210, 122, .50);          /* "you" only */
  --hl-hair-gold-state: rgba(255, 210, 122, .60);    /* a state ring: the next door, the selected segment, face and answer */
  --hl-ring-hair: 0 0 0 1px var(--hl-hair);                        --hl-ring-hair-in: inset 0 0 0 1px var(--hl-hair);
  --hl-ring-ctl-in: inset 0 0 0 1px var(--hl-hair-ctl);
  --hl-ring-gold: 0 0 0 1px var(--hl-hair-gold);                   --hl-ring-gold-in: inset 0 0 0 1px var(--hl-hair-gold);
  --hl-ring-gold-state: 0 0 0 1px var(--hl-hair-gold-state);       --hl-ring-gold-state-in: inset 0 0 0 1px var(--hl-hair-gold-state);
  --hl-ring-amber: 0 0 0 1px rgba(244, 169, 59, .65);              /* a missed door */
  --hl-ring-rose-in: inset 0 0 0 1px var(--hl-danger);             /* a field that was refused */
  --hl-ring-face: 0 0 0 1px rgba(255, 243, 218, .16);              /* an avatar, Pip's face */
  --hl-ring-die: 0 0 0 1px rgba(60, 8, 20, .55);                   /* the impression round the Play pill */
  --hl-ring-dot: 0 0 0 2px var(--hl-surface-inset);                /* the moat of the unread dot */
  --hl-ring-arch: inset 0 0 0 1px rgba(255, 243, 218, .42);        /* an unlit arch of the progress line: 3.72:1 on the night */
  --hl-ring-arch-next: inset 0 0 0 1.5px var(--hl-hair-gold-state);
  --hl-ring-arch-missed: inset 0 0 0 1.5px rgba(244, 169, 59, .85);
  --hl-rule-l: -1px 0 0 var(--hl-hair);                            /* a vertical divider, drawn on the right-hand cell */
  --hl-rule-t: 0 -1px 0 rgba(255, 243, 218, .09);                  /* the top edge of a bar */
  --hl-rule-b: 0 1px 0 var(--hl-hair);                             /* a hairline under a row or a head (the list card) */
  --hl-rule-b-in: inset 0 -1px 0 var(--hl-hair);                   /* the underline of the underlined tabs */
  --hl-ring-success-in: inset 0 0 0 1px var(--hl-success);         /* a field that was accepted */
  --hl-ring-bad-in: inset 0 0 0 1px var(--hl-paper-bad);           /* a wrong answer on paper */
  --hl-edge-amber: inset 0 -2px 0 var(--hl-accent-amber);          /* the offline banner's foot */
  --hl-hi: inset 0 1px 0 rgba(255, 243, 218, .08);                 /* top light on a raised control */
  --hl-lit-top: inset 0 1px 0 rgba(255, 255, 255, .30);
  --hl-lit-edge: var(--hl-lit-top), inset 0 -1px 0 rgba(143, 90, 12, .35);       /* the light and the shade of lit glass */
  --hl-focus: 2px solid var(--hl-accent-gold);                     /* the one focus ring (outline-offset 3px; negative where a parent would clip it; ink on paper) */

  /* ---- depth: a hairline, a top light, two soft layers; never a coloured glow */
  --hl-e1: 0 0 0 1px var(--hl-hair), inset 0 1px 0 rgba(255, 243, 218, .06), 0 1px 2px rgba(2, 8, 12, .45), 0 12px 28px -12px rgba(2, 8, 12, .60);   /* cards, plate, meter, summary, facade */
  --hl-e2: 0 0 0 1px var(--hl-hair), inset 0 1px 0 rgba(255, 243, 218, .08), 0 2px 4px rgba(2, 8, 12, .40), 0 20px 44px -14px rgba(2, 8, 12, .70);   /* the ticket (drawn by its wrapper) */
  --hl-e3: 0 0 0 1px var(--hl-hair), inset 0 1px 0 rgba(255, 243, 218, .08), 0 4px 10px rgba(2, 8, 12, .40), 0 36px 72px -20px rgba(2, 8, 12, .80);  /* sheets and dialogs */
  --hl-press: inset 0 1px 0 rgba(255, 243, 218, .07), inset 0 -1px 0 rgba(2, 8, 12, .55);       /* a door pressed into card stock */
  --hl-e-paper: 0 1px 2px rgba(2, 8, 12, .50), 0 2px 6px rgba(2, 8, 12, .30), 0 24px 48px -16px rgba(2, 8, 12, .80), inset 0 1px 0 rgba(255, 252, 240, .35);   /* a sheet lying on the dark, its top edge catching the light */
  --hl-e-photo: 0 0 0 1px rgba(20, 35, 45, .30), 0 2px 5px -1px rgba(40, 26, 10, .40);          /* a picture, or a slip, laid on paper */

  /* ---- paper, ink and foil (css/paper.css): a DIM parchment, luminance .475; ink on it is 7.20:1 at the 5th percentile of the rendered pixels */
  --hl-paper: #CDB48C;                /* the sheet (OKLCH hue 79: warm, not olive) */
  --hl-paper-wash: rgba(20, 35, 45, .07);       /* a well on the sheet is an ink wash over the paper, never a second paper tone */
  --hl-ink: #14232D;                  /* ink: the type on paper (it was the dark text on a cream surface: there is no cream surface any more) */
  --hl-ink-2: #273640;                /* second ink: captions and labels (5.89:1 at the 5th percentile) */
  --hl-paper-hair: rgba(20, 35, 45, .20);       /* a hairline drawn in ink on the paper */
  --hl-paper-hair-2: rgba(20, 35, 45, .62);     /* an ink edge that identifies a control: 3.45:1 */
  --hl-emb-fill: #D6BD97;             /* a blind emboss (the Star over the title, the seal's P): the paper a touch lighter ... */
  --hl-emb-hi: rgba(255, 251, 235, .70);        /* ... a light edge up and left ... */
  --hl-emb-lo: rgba(74, 52, 24, .60);           /* ... and a shade edge down and right. Custom properties, so the dark stock switches them by one class */
  --hl-foil-rail: linear-gradient(90deg, rgba(226, 185, 87, 0), rgba(226, 185, 87, .55) 10%, rgba(255, 233, 176, .7) 50%, rgba(226, 185, 87, .55) 90%, rgba(226, 185, 87, 0));   /* the gilt rail under the doors (1 px) */
  --hl-foil-short: linear-gradient(90deg, rgba(201, 150, 58, 0), #E2B957 28%, #FFE9B0 50%, #E2B957 72%, rgba(201, 150, 58, 0));   /* the 96 px rule under the Welcome tagline */
  --hl-foil-on-paper: linear-gradient(90deg, rgba(120, 84, 20, 0), #8A6218 22%, #B98A2E 50%, #8A6218 78%, rgba(120, 84, 20, 0));   /* a foil rule on paper (1 px): darker, so it shows */
  --hl-foil-border: linear-gradient(135deg, #8A6218, #B98A2E 38%, #8A6218 66%, #A87A28);   /* the foil keyline on paper */
  --hl-foil-border-dk: linear-gradient(135deg, #C9963A, #F2D58C 38%, #C9963A 66%, #E2B957);   /* the same on the dark (the certificate, the dark stock) */

  /* ---- texture: grain-night is on the body only (it dithers the sky); the paper's tooth loads only where a .hl-paper is drawn.
     A url() in a custom property that is not REGISTERED resolves where the variable is USED: from css/screens/play.css the same variable would ask for css/art/ui/... and get a 404. The two registrations
     below make the address absolute where it is written, so the tokens work from any stylesheet (browsers without @property keep the plain declarations, which work from css/ only). */
  --hl-grain-night: url(../art/ui/grain-night.webp);
  --hl-tooth-paper: url(../art/ui/tooth-paper.webp);

  /* ---- type: families. The web font first, then a system font sized to match it (fonts/fonts.css), then the plain fallbacks. Playfair has one weight (400); Red Hat Display is the variable file (300 to 900). */
  --hl-font-display: 'Playfair Display', 'Playfair Display Fallback', Georgia, 'Times New Roman', serif;
  --hl-font-ui: 'Red Hat Display', 'Red Hat Display Fallback', Lato, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- type: roles (SPEC 4). Sizes are rem (the person's own text size counts), line heights unitless ratios; the px are the design values at a 16 px root. One step at 600 px, no clamp(). */
  /* A ratio is rounded UP at its fourth decimal, never to the nearest: size x ratio must not fall under the px it stands for (11 x 1.4545 = 15.9995, which Blink floors to a 15.984 px line box
     and sets the glyphs a pixel higher than the design). tests/app/ui/components.test.mjs reads every pair below. */
  --hl-t-display-size: 2.125rem;     --hl-t-display-lh: 1.1177;      /* 34/38 Playfair 400: the chapter title on Today, the Welcome numerals */
  --hl-t-title-size: 1.75rem;        --hl-t-title-lh: 1.1429;        /* 28/32 Playfair 400: the Welcome promise, the letter's title, the quiz question */
  --hl-t-heading-size: 1.375rem;     --hl-t-heading-lh: 1.2728;      /* 22/28 Playfair 400: the screen title in the app bar, the ticket title, the meter's title, the summary's title */
  --hl-t-headline-size: 1rem;        --hl-t-headline-lh: 1.25;       /* 16/20 Red Hat 600: buttons, names in rows, the word "Play" */
  --hl-t-body-size: 1rem;            --hl-t-body-lh: 1.5;            /* 16/24 Red Hat 400 */
  --hl-t-body-s-size: .875rem;       --hl-t-body-s-lh: 1.4286;       /* 14/20 Red Hat 500: EVERY message (a teaser, a meta line, Pip's line, a hint, a refusal, a caption that says something) */
  --hl-t-caption-size: .75rem;       --hl-t-caption-lh: 1.3334;      /* 12/16 Red Hat 500: pure meta only (a date, "You", "your power", the time of a message, a tab's label) */
  --hl-t-snug-lh: 1.1429;                                            /* a 14 px message that is one line and sets on 16: the street's caption, the ticket's prize, the meter's status, a message's state (a ratio of ITS OWN size: the caption's 1.3333 on a 14 px line is 18.7, not 16) */
  --hl-t-label-size: .6875rem;       --hl-t-label-lh: 1.4546;        /* 11/16 Red Hat 700 caps, +.16em: eyebrows and labels (never on a button, chip, tab or row) */
  --hl-t-figure-size: 1.25rem;       --hl-t-figure-lh: 1.2;          /* 20/24 Red Hat 600 tabular: facts, rank, power; 28/32 in a result and the meter */
  --hl-t-figure-l-size: 1.75rem;     --hl-t-figure-l-lh: 1.1429;
  --hl-t-figure-xl-size: 3.5rem;     --hl-t-figure-xl-lh: 1;         /* 56/56 Red Hat 300: the game result and the quiz result only */
  --hl-t-letter-lh: 1.625;                                           /* the letter: body at 16/26 */
  --hl-t-door-size: min(1.75rem, 36px);                              /* a door's numeral: 28/32 Playfair, capped at 130 percent of text size */

  /* ---- space (a 4 px base) and the gutter */
  --hl-sp-4: 4px;  --hl-sp-8: 8px;  --hl-sp-12: 12px;  --hl-sp-16: 16px;  --hl-sp-24: 24px;  --hl-sp-32: 32px;  --hl-sp-48: 48px;
  --hl-gutter: 20px;                           /* page side padding: 16 below 375 px, 24 from 600 px */
  --hl-content-max: 560px;                     /* a column, centred, on tablets */
  --hl-inset-l: max(var(--hl-gutter), var(--hl-safe-left), calc((100% - var(--hl-content-max)) / 2 + var(--hl-gutter)));       /* where content starts on the left: the gutter on a phone, the column's edge on a tablet */
  --hl-inset-r: max(var(--hl-gutter), var(--hl-safe-right), calc((100% - var(--hl-content-max)) / 2 + var(--hl-gutter)));       /* ... and where it ends on the right (percentages are of the width of the box that uses them) */

  /* ---- radii */
  --hl-r-1: 8px;  --hl-r-2: 12px;  --hl-r-3: 16px;  --hl-r-4: 24px;  --hl-r-pill: 999px;
  /* 8: the foot of a door, a picture on paper. 12: field, PIN cell, answer row, segment, face option. 16: card, plate, ticket, button, sheet of paper, meter. 24: the top of a sheet. The arch tops are half a width, not a token. */

  /* ---- motion: one curve, nothing overshoots, nothing scales past 1.04; leaving takes 60% of the time arriving does */
  --hl-dur-tap: 90ms;         /* press feedback */
  --hl-dur-fast: 160ms;       /* a state, a colour */
  --hl-dur-chip: 240ms;       /* a toast, a chip, the postmark landing */
  --hl-dur-tab: 280ms;        /* the tab indicator */
  --hl-dur-sheet: 320ms;      /* sheets, dialogs, toasts */
  --hl-dur-page: 320ms;       /* a push */
  --hl-dur-celebrate: 600ms;  /* a light changing, the Star meter */
  --hl-ease-out: cubic-bezier(.22, 1, .36, 1);

  /* ---- z-index scale */
  --hl-z-base: 0;  --hl-z-raised: 10;  --hl-z-sticky: 20;  --hl-z-fade: 28;  --hl-z-tabbar: 30;
  --hl-z-scrim: 40;  --hl-z-sheet: 50;  --hl-z-dialog: 60;  --hl-z-toast: 70;  --hl-z-max: 100;

  /* ---- safe areas, targets and bars (the short names --sat --sab --sal --sar are the same values, for terse screen CSS) */
  --hl-safe-top: env(safe-area-inset-top, 0px);
  --hl-safe-right: env(safe-area-inset-right, 0px);
  --hl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hl-safe-left: env(safe-area-inset-left, 0px);
  --sat: var(--hl-safe-top); --sar: var(--hl-safe-right); --sab: var(--hl-safe-bottom); --sal: var(--hl-safe-left);
  --hl-tap: 44px;             /* minimum touch target */
  --tap: var(--hl-tap);
  --hl-bar-h: 44px;           /* the app bar below the top inset (44, so that its 44 px links lie wholly inside the page) */
  --hl-tabbar-h: 52px;        /* the tab bar's own height above the bottom inset */
  --hl-tab-h: 0px;            /* the room a tab bar takes now (the shell sets 52px while it shows, 0px when it does not) */
  --hl-dock-h: 0px;           /* the room a pinned bar takes above the tab bar: the Rankings dock (64), the chat composer (64) or the action slot (72: 12 + 52 + 8); the shell sets it */
  --hl-kb: 0px;               /* how far the soft keyboard has pushed the visual viewport up (the shell sets it while the keyboard is open) */
  --hl-overlay-pos: fixed;    /* sheets, dialogs, toasts: set to absolute to preview them inside a frame */
  --hl-nav-pos: fixed;        /* the tab bar, the dock, the action slot and the fade: set to absolute to preview them inside a frame */
}

/* below 375 px: a 16 px gutter */
@media (max-width: 374px) {
  :root { --hl-gutter: 16px; }
}
/* from 600 px: the type steps up once, and the gutter is 24 */
@media (min-width: 600px) {
  :root {
    --hl-t-display-size: 2.75rem;   --hl-t-display-lh: 1.0910;
    --hl-t-title-size: 2.125rem;    --hl-t-title-lh: 1.1765;
    --hl-t-heading-size: 1.625rem;  --hl-t-heading-lh: 1.2308;
    --hl-t-headline-size: 1.125rem; --hl-t-headline-lh: 1.3334;
    --hl-t-body-size: 1.125rem;     --hl-t-body-lh: 1.5556;
    --hl-t-body-s-size: 1rem;       --hl-t-body-s-lh: 1.5;
    --hl-t-caption-size: .8125rem;  --hl-t-caption-lh: 1.2308;
    --hl-t-label-size: .75rem;      --hl-t-label-lh: 1.3334;
    --hl-t-letter-lh: 1.6667;
    --hl-gutter: 24px;
  }
}