/* ==========================================================================
   Mission Me — design tokens · the base system (first drawn as v0.4 "Polish"; Tactile sits on top)
   Atomic Design, level 0 ("subatomic"). Everything else reads from here.

   Source: Figma "✦ Polish" (123:2) — the component sheets 165:6 (on photo)
   and 167:181 (on paper), whose variables are mirrored here 1:1 — and the
   art direction (70:1684): smoky glass, a small warm light in a silver
   atmosphere, light type that is clear in use.

   Space and sizes sit on a 4px base, mostly the 8px grid; 12 and 20 are
   the half-steps the components use for padding.
   ========================================================================== */

/* ---- Type: ABC Areal Superfamily, one variable file (Dinamo).
   Axes: wght 400–700 · slnt −12–0 · MONO 0–100 (sans → mono) · DRKM 0–1 (light-on-dark compensation).
   The Figma sheets are set in Albert Sans Light; Areal has no Light cut, so
   display sizes use Regular 400 (the lightest) with DRKM on over photos.
   Licence: free to use (confirmed by Bernt, 2026-10-20), including on the web. */
@font-face {
  font-family: "ABC Areal";
  src: url("../assets/fonts/ABCArealSuperfamilyVariable.woff2") format("woff2-variations"),
       url("../assets/fonts/ABCArealSuperfamilyVariable.woff2") format("woff2");
  font-weight: 400 700; font-style: oblique 0deg 12deg; font-display: swap;
}

/* Registered so the axes can be transitioned and animated */
@property --mono  { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --drkm  { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --slnt  { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --sheen { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  /* ---- Primitive colour ------------------------------------------------ */
  --paper-50:  #F7F6F3;
  --paper-100: #EFEEEB;   /* the paper sheet (167:181) */
  --paper-200: #E3E2DD;
  --silver-300: #BFBFBA;  /* empty journey cover */
  --ink-900:   #141414;
  --ink-700:   #3A3A36;
  --night-900: #0B0C0E;
  --moss-700:  #3D4236;   /* the on-photo sheet ground (165:6) */
  --bone:      #F5F3EF;   /* the primary button on photo */

  --white:     #FFFFFF;
  --white-95:  rgb(255 255 255 / .95);
  --white-72:  rgb(255 255 255 / .72);
  --white-55:  rgb(255 255 255 / .55);
  --white-28:  rgb(255 255 255 / .28);
  --white-22:  rgb(255 255 255 / .22);
  --white-14:  rgb(255 255 255 / .14);
  --white-10:  rgb(255 255 255 / .10);
  --ink-a60:   rgb(20 20 20 / .60);
  --ink-a45:   rgb(20 20 20 / .45);
  --ink-a18:   rgb(20 20 20 / .18);
  --ink-a10:   rgb(20 20 20 / .10);

  /* The one warm light: the "next" dot, a glow in the silver (art direction 02) */
  --glow-amber: #FFD7A8;
  --glow-amber-deep: #F2A766;

  /* Sky gradient pairs, kept for the colour-only screens: core (light) → edge (deep) */
  --blue-core:    #00E5FF;  --blue-edge:    #000062;
  --magenta-core: #FF1FA6;  --magenta-edge: #5A0038;
  --green-core:   #00AB55;  --green-edge:   #012208;
  --amber-core:   #EFAC02;  --amber-edge:   #FE6448;
  --night-core:   #24365A;  --night-edge:   #05070C;
  --silver-core:  #DCE2EA;  --silver-edge:  #6E6A72;  /* art direction: smoky glass */

  /* The red/blue intro task only */
  --signal-red:  #FF3B30;

  /* ---- Semantic colour: ON PHOTO (default) ------------------------------
     Mirrors the Figma variables om/* in mode "On photo". Paper overrides below. */
  --text-primary:   var(--white);
  --text-secondary: var(--white-72);
  --text-tertiary:  var(--white-55);
  --surface-glass:        var(--white-10);
  --surface-glass-subtle: var(--white-14);
  --surface-glass-strong: var(--white-22);
  --border-glass:   var(--white-22);
  --indicator-active:   var(--white-95);
  --indicator-inactive: var(--white-22);
  --action-primary-bg: var(--bone);
  --action-primary-fg: var(--ink-900);
  --accent-glow: var(--glow-amber);
  --focus-ring: var(--white);

  /* Glass/On photo: blur 30, a 1px top highlight, a soft drop */
  --glass-blur: 15px;   /* CSS blur radius = Figma radius / 2 */
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / .28);
  --glass-shadow: 0 12px 32px rgb(0 0 0 / .10);
  --elevation-button: 0 10px 24px rgb(0 0 0 / .16);

  /* Older names, kept as aliases so screens built on v0.3 still read */
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--white-72);
  --text-on-dark-subtle: var(--white-55);
  --text-on-light: var(--ink-900);
  --text-on-light-muted: var(--ink-a60);
  --text-on-light-subtle: var(--ink-a45);
  --surface-paper: var(--paper-100);
  --surface-night: var(--night-900);
  --rule-dark:  var(--white-22);
  --rule-light: var(--ink-a10);
  --white-80: var(--white-72); --white-60: var(--white-55); --white-50: var(--white-55);
  --white-30: var(--white-22); --white-16: var(--white-14);
  --ink-a40: var(--ink-a45); --ink-a16: var(--ink-a10);

  /* ---- Sky: the gradients carry time of night ------------------------- */
  --sky-evening-core: var(--blue-core);    --sky-evening-edge: var(--blue-edge);
  --sky-neon-core:    var(--magenta-core); --sky-neon-edge:    var(--magenta-edge);
  --sky-still-core:   var(--green-core);   --sky-still-edge:   var(--green-edge);
  --sky-sunrise-core: var(--amber-core);   --sky-sunrise-edge: var(--amber-edge);
  --sky-night-core:   var(--night-core);   --sky-night-edge:   var(--night-edge);

  /* ---- Type ------------------------------------------------------------
     Figma text styles, as size / line-height / tracking. Figma's tracking is
     in %, so it is written in em here (−3% = −.03em). */
  --font-sans: "ABC Areal", "Helvetica Neue", Arial, sans-serif;
  --mono-on: 100;   /* times and numbers can switch to the MONO axis, same family */
  --slant-on: -12;
  --weight-light:   400;   /* Figma's Light 300 → Areal's lightest */
  --weight-regular: 400;
  --weight-medium:  500;

  --type-numeral-size:    120px; --type-numeral-lh: 1;    --type-numeral-track: -.04em;   /* Numeral */
  --type-display-xl-size:  44px; --type-display-xl-lh: 1.08; --type-display-track: -.02em; /* Display/XL */
  --type-display-l-size:   38px; --type-display-l-lh: 1.08;                                 /* Display/L */
  --type-title-size:       24px; --type-title-lh: 1.2;    --type-title-track: -.02em;      /* Title */
  --type-body-l-size:      17px; --type-body-l-lh: 1.4;   --type-body-l-track: -.005em;    /* Body/L */
  --type-row-size:         16px; --type-row-lh: 1.3;      --type-row-track: -.003em;       /* Row */
  --type-button-size:      16px; --type-button-lh: 1.2;   --type-button-track: -.005em;    /* Button */
  --type-body-size:        15px; --type-body-lh: 1.45;    --type-body-track: -.003em;      /* Body/M */
  --type-small-size:       13px; --type-small-lh: 1.45;                                     /* Body/S */
  --type-label-size:       12px; --type-label-lh: 1.3;    --type-label-track: .03em;       /* Label */
  --type-caption-size:     11px; --type-caption-lh: 1.3;                                    /* Caption */

  /* ---- Space ----------------------------------------------------------- */
  --space-half: 4px;
  --space-1:  8px;
  --space-12: 12px;   /* half-step: headings, card gaps */
  --space-2: 16px;
  --space-20: 20px;   /* half-step: card and row padding */
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --gutter: var(--space-3);   /* 24: content is 342 wide on a 390 screen */

  /* ---- Size ------------------------------------------------------------ */
  --size-icon:    16px;   /* every icon: 16px, 1.2px stroke */
  --size-icon-btn: 32px;
  --size-hit:     44px;   /* minimum tap target */
  --size-control: 56px;   /* buttons */
  --size-answer:  60px;   /* answer rows */
  --size-screen-w: 390px;
  --size-screen-h: 844px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-s:  12px;
  --radius-m:  20px;   /* answer rows */
  --radius-l:  24px;   /* filter + reflect cards */
  --radius-xl: 28px;   /* route panel */
  --radius-screen: 40px;
  --radius-card: 28px;
  --radius-pill: 999px;

  /* ---- Effects --------------------------------------------------------- */
  --blur-glass: var(--glass-blur);
  --blur-haze:  36px;   /* the stop's photo, blurred into colour */
  --blur-sky:   48px;
  --grain-opacity: .05; /* art direction: subtle grain in the glass */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --dur-fast:   160ms;
  --dur:        320ms;
  --dur-slow:   640ms;
  --dur-scene: 1200ms;
  --dur-breath: 4000ms;
  --dur-sky:   14s;
  --dur-drift: 40s;

  /* ---- Layout: fixed lines on every journey screen (Figma notes) --------- */
  --y-header:  52px;    /* journey header */
  --y-heading: 140px;   /* heading starts */
  --y-action:  732px;   /* primary button */
}

/* ---- Semantic colour: ON PAPER ----------------------------------------------
   Figma om/* in mode "On paper": Home, Reflect, Mission, sheets. */
.screen--paper, .panel--paper, .sheet__panel, .on-paper {
  --text-primary:   var(--ink-900);
  --text-secondary: rgb(20 20 20 / .60);
  --text-tertiary:  rgb(20 20 20 / .45);
  --surface-glass:        rgb(255 255 255 / .70);
  --surface-glass-subtle: rgb(255 255 255 / .55);
  --surface-glass-strong: rgb(255 255 255 / .85);
  --border-glass:   var(--white);
  --indicator-active:   var(--ink-900);
  --indicator-inactive: rgb(20 20 20 / .18);
  --action-primary-bg: var(--ink-900);
  --action-primary-fg: var(--white);
  --focus-ring: var(--ink-900);
  --drkm: 0;
  /* Glass/On paper: blur 24, two soft ink shadows, no highlight */
  --glass-blur: 12px;
  --glass-highlight: inset 0 0 0 transparent;
  --glass-shadow: 0 1px 2px rgb(20 20 26 / .06), 0 14px 36px rgb(20 20 26 / .08);
  --elevation-button: 0 10px 24px rgb(20 20 26 / .14);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-scene: 0ms; --dur-breath: 0ms; --dur-sky: 0s; --dur-drift: 0s; }
}