/*
  Mavme design tokens v2: the Iris lock in the Halo colors.
  Owner decision 2026-10-11 23:01: direction A's structure (iris, composition, serif names) in
  direction B's palette (midnight blue-black, ice-blue key light). Champagne is retired.
  Source of truth for every color, face, size, radius, shadow and motion value in the app.
  Governing doc: research/2026-10-11-design-direction.md (section 5).
  Rule: components read these variables. A literal hex, px radius, duration or easing in a
  component file fails review (tripwire K1/K2/J1). Change a value here, never in a component.
*/
:root {
  color-scheme: dark;

  /* ---- Surface ladder (midnight blue-black). One step = one elevation. ---- */
  --s0: #06080D;            /* canvas: vault, landing, enrollment */
  --s1: #0C1018;            /* sheets */
  --s2: #131A26;            /* raised: keys, cards, their bubbles, composer */
  --s3: #1C2433;            /* higher: menus, reaction bar, secondary buttons */
  --s4: #263044;            /* pressed state of s2/s3 */
  --theirs: #131A26;        /* = s2 */
  --mine: #1E2738;          /* your bubbles: a half step above s3, never accent */

  /* ---- Text ladder (cool white on midnight). Contrast table in doc 5.3. ---- */
  --t1: #EEF3FB;                     /* primary: 13.4:1 or better on every surface */
  --t2: rgba(238, 243, 251, .64);    /* secondary: 6.4:1 or better */
  --t3: rgba(238, 243, 251, .52);    /* tertiary small text: 4.7:1 or better */
  --t4: rgba(238, 243, 251, .20);    /* non-text only: ticks, rules, empty marks */

  /* ---- Depth ---- */
  --hair: rgba(190, 215, 255, .11);  /* 1px hairline around raised surfaces */
  --hi: rgba(215, 230, 255, .09);    /* inset top-edge highlight */
  --facet: rgba(215, 230, 255, .07); /* faceted stone overlay */

  /* ---- Key light: THE one accent (ice blue). Meaning: "your key is at work". ----
     Allowed only on: the iris, code marks, anything sealed for you (stone ring, view-once
     tile, "New"), the send / primary action, the lock button keyhole, the invite QR glow,
     the attempts banner ring. Never on: message bubbles, message text, media, decoration. */
  --key: #8FCBFF;
  --key-2: #4E8FD6;                  /* deep tone for gradients only */
  --key-glow: rgba(143, 203, 255, .45);
  --key-line: rgba(143, 203, 255, .50);
  --key-amb: rgba(110, 170, 255, .13);  /* the one ambient light per screen */
  --on-key: #06121F;                 /* text on key fills: 10.9:1 */

  /* ---- Semantic. Red means loss: destructive actions and failures only. ----
     Red never appears in the camera (recording is white). */
  --danger: #FF6B7A;                 /* 5.4:1 or better on every surface */

  /* ---- Paper (the QR tile) ---- */
  --paper: #E3EEFC;
  --ink: #060B14;                    /* 16.8:1 on paper */

  /* ---- Scrim behind sheets, alerts and viewer tops ---- */
  --scrim: rgba(0, 0, 0, .45);

  /* ---- Glass (controls floating over the live camera only) ---- */
  --glass-bg: rgba(24, 24, 26, .34);
  --glass-blur: 18px;
  --glass-sat: 170%;
  --glass-rim: rgba(255, 255, 255, .12);
  --glass-top: rgba(255, 255, 255, .22);

  /* ---- Type ---- */
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  --display: "Bodoni Moda", "Bodoni 72", Didot, serif;   /* self-hosted WOFF2, OFL 1.1 */
  --display-w: 500;
  --display-track: -.005em;
  --display-floor: 22px;             /* never set Bodoni smaller (tripwire K4) */
  --digits: "Bodoni Moda", "Bodoni 72", Didot, serif;
  --digits-w: 400;
  --digits-size: 30px;
  --mark-font: "Bodoni Moda", serif; /* harness only: production wordmark ships as SVG */
  --mark-w: 500;
  --mark-track: .52em;
  --mark-case: uppercase;
  --mark-size: 13px;

  /* Type ladder: size / line-height. Hierarchy always skips at least one step. */
  --fs-display-xl: 36px; --lh-display-xl: 40px;   /* landing title */
  --fs-display-l: 32px;  --lh-display-l: 37px;    /* sheet titles, chat name, enrollment */
  --fs-display-s: 24px;  --lh-display-s: 28px;    /* viewer name */
  --fs-monogram: 23px;                            /* stones */
  --fs-text-l: 17px;     --lh-text-l: 22px;       /* status lines (SF 500) */
  --fs-text-m: 16px;     --lh-text-m: 21px;       /* messages, body (SF 400); body copy lh 22 */
  --fs-text-s: 13px;     --lh-text-s: 17px;       /* meta, captions, stone names */
  --fs-label: 12px;      --lh-label: 16px;        /* caps labels, SF 600, tracking .08em */

  /* ---- Code marks + stones (component tokens) ---- */
  --pin-w: 11px; --pin-h: 11px; --pin-r: 1.5px; --pin-rot: 45deg;   /* diamonds */
  --stone-size: 58px;
  --stone-bg: radial-gradient(circle at 34% 26%, #3b475b 0, #1a2130 52%, #0a0d14 100%);

  /* ---- The iris (hero object): blue-steel blades, platinum bezel ---- */
  --iris-core: #080B11;
  --iris-blade-a: #5B6880; --iris-blade-b: #4D5970; --iris-blade-mid: #1F2634; --iris-blade-low: #0C1018;
  --iris-metal-1: #5F6B7D; --iris-metal-2: #E6EEF9; --iris-metal-3: #46505F; --iris-metal-4: #B8C6D8; --iris-metal-5: #303846;
  --iris-seam: rgba(0, 0, 0, .7);          /* blade separation lines */
  --iris-sheen-hi: rgba(255, 255, 255, .10);
  --iris-sheen-lo: rgba(0, 0, 0, .25);     /* diagonal light over the blade chamber */

  /* ---- Intruder evidence thumbnails ---- */
  --thumb-size: 56px; --r-thumb: 14px;

  /* ---- Spacing (4px grid) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --gutter-thread: 16px; --gutter-sheet: 20px; --gutter-title: 24px;
  --tap-min: 44px;

  /* ---- Radius caps (max 30px; perfect circles exempt) ---- */
  --r-sheet: 30px; --r-card: 26px; --r-bubble: 20px; --r-bubble-tail: 7px; --r-menu: 16px; --r-icon: 12px;

  /* ---- Shadows / depth recipes ---- */
  --sh-raised: inset 0 1px 0 var(--hi), 0 0 0 1px var(--hair);
  --sh-sheet: inset 0 1px 0 var(--hi), 0 -1px 0 var(--hair), 0 -20px 60px rgba(0, 0, 0, .45);
  --sh-float: inset 0 1px 0 var(--hi), 0 0 0 1px var(--hair), 0 16px 40px rgba(0, 0, 0, .5);
  --sh-glass: inset 0 1px 0 var(--glass-top), inset 0 0 0 1px var(--glass-rim), 0 6px 18px rgba(0, 0, 0, .28);
  --sh-sealed: inset 0 1px 0 var(--hi), 0 0 0 1.6px var(--key), 0 0 20px 3px var(--key-glow);
  --sh-mark-glow: 0 0 8px 1px var(--key-glow);   /* lit code mark */
  --grain-opacity: .06;              /* SVG fractal noise, overlay blend, on s0 screens */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --focus-ring: rgba(255, 255, 255, .9);   /* 2px, 2px offset: keyboard / VoiceOver focus */

  /* ---- Motion. Transform and opacity only (tripwire J1). ----
     Springs are specified as response / damping fraction (mass 1). Gesture-driven motion runs
     the JS spring with the finger's release velocity; non-gesture motion uses these linear()
     curves, sampled from the same springs (Safari 17.2+, Chrome 113+). */
  --ease-press: linear(0, 0.069, 0.216, 0.365, 0.502, 0.618, 0.717, 0.789, 0.844, 0.889, 0.919, 0.941, 0.958, 0.97, 0.979, 0.985, 0.989, 0.992, 0.995, 0.996, 0.997, 0.998, 0.999, 0.999, 1);
  --dur-press: 286ms;                /* response .18, damping 1.00 */
  --ease-ui: linear(0, 0.055, 0.175, 0.317, 0.451, 0.578, 0.685, 0.771, 0.839, 0.89, 0.926, 0.953, 0.971, 0.984, 0.992, 0.997, 1, 1.002, 1.002, 1.002, 1.002, 1.002, 1.002, 1.001, 1);
  --dur-ui: 437ms;                   /* response .32, damping .88 */
  --ease-pop: linear(0, 0.088, 0.281, 0.51, 0.712, 0.871, 0.981, 1.047, 1.077, 1.081, 1.071, 1.054, 1.035, 1.02, 1.008, 1, 0.995, 0.993, 0.994, 0.995, 0.996, 0.997, 0.999, 1, 1);
  --dur-pop: 524ms;                  /* response .30, damping .62 (8% overshoot): reactions only */
  --ease-sheet: linear(0, 0.055, 0.176, 0.321, 0.469, 0.596, 0.703, 0.789, 0.856, 0.905, 0.941, 0.965, 0.982, 0.993, 0.999, 1.002, 1.004, 1.004, 1.004, 1.004, 1.003, 1.002, 1.002, 1.001, 1);
  --dur-sheet: 583ms;                /* response .42, damping .86 */
  --ease-vault: linear(0, 0.051, 0.172, 0.317, 0.464, 0.599, 0.717, 0.809, 0.881, 0.934, 0.971, 0.994, 1.009, 1.016, 1.019, 1.019, 1.017, 1.014, 1.012, 1.009, 1.006, 1.004, 1.003, 1.002, 1);
  --dur-vault: 826ms;                /* response .62, damping .78; visually open by ~380ms */
  --ease-fallback: cubic-bezier(.2, .9, .25, 1);
  --dur-fade-in: 160ms;
  --dur-fade-out: 120ms;
  --dur-cross: 200ms;
  --dur-toast-in: 240ms;
  --dur-toast-out: 180ms;
  --dur-view-transition-max: 320ms;
  --dur-mark: 90ms;                  /* a code mark lighting */
  --dur-flare: 120ms;                /* the key flare before the vault opens */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Springs become short fades; the iris cross-fades instead of opening. */
    --ease-press: linear(0, 1); --dur-press: 1ms;
    --ease-ui: ease-out; --dur-ui: 120ms;
    --ease-pop: ease-out; --dur-pop: 120ms;
    --ease-sheet: ease-out; --dur-sheet: 160ms;
    --ease-vault: ease-out; --dur-vault: 160ms;
  }
}