/* =====================================================================================
   Nova design tokens (source of truth for the production PWA)

   Origin: Softermii prototype sm-proto/site/assets/nova/v3.css + motion.css + orb tokens,
   cleaned into a semantic system. Mirrored 1:1 in tokens.json (W3C design tokens format).

   Rules
   - Product CSS reads ONLY these custom properties. No hex, rgb or named colours in components.
   - Dark is a token swap on the same screens. The orb and the brand orange never change in dark.
   - Theme: follows the phone (prefers-color-scheme) unless <html data-theme="light|dark"> forces it.

   Deviations from the prototype (all for WCAG 2.2 AA, see foundations.html "Contrast"):
   - color-brand-ink light #c9591f -> #b54d17 (3.91:1 on bg was below 4.5:1; now 4.78:1 on bg, 5.20:1 on surface)
   - color-brand-ink dark  #c9591f -> #e0703a (3.86:1 on surface was below 4.5:1; prototype already did this on the island)
   - color-ink-2 light     #6e6e73 -> #5c5c61 and color-ink-3 light #8e8e93 -> #6e6e73
     (faint #8e8e93 was 2.99:1 on bg; ink-3 now reaches 4.66:1, ink-2 keeps a visible step above it)
   - new: color-warning (prototype had none), color-line-field (3:1 boundary for inputs)
   ===================================================================================== */

:root {
  /* ---------- colour: neutrals ---------- */
  --color-bg: #f5f5f7;               /* page ground ("paper"), carries the 22px dot grid */
  --color-surface: #ffffff;          /* cards, sheets, fields ("card") */
  --color-ink: #1d1d1f;              /* body text, titles, primary pill fill */
  --color-ink-2: #5c5c61;            /* secondary text (leads, subs) */
  --color-ink-3: #6e6e73;            /* metadata, captions, placeholders, inactive tabs */
  --color-hairline: rgba(0, 0, 0, .08);         /* card borders, row separators */
  --color-hairline-strong: rgba(0, 0, 0, .12);  /* rails, dashed wires, outlined badges */
  --color-line-field: #86868b;       /* input boundary at rest (>= 3:1 on surface and bg) */
  --color-fill: #e9e9eb;             /* neutral fill: my bubble, chips, meters' track, skeleton */
  --color-dots: rgba(0, 0, 0, .085); /* page dot grid */
  --color-glass: rgba(255, 255, 255, .8);       /* island, tab bar (with backdrop blur) */
  --color-scrim: rgba(0, 0, 0, .18); /* behind sheets and overlays */
  --color-shadow: rgba(0, 0, 0, .25);/* the one shadow colour ("lift") */
  --color-on-ink: #ffffff;           /* text on ink fills (primary pill, toast) */

  /* ---------- colour: brand (orange means two things only: Nova's own work, and what needs you) ---------- */
  --color-brand: #e0703a;            /* dots, rings, bars, the orb; never body text on light */
  --color-brand-ink: #b54d17;        /* brand as text: links, one-tap answers, "Needs you" */
  --color-brand-tint: rgba(224, 112, 58, .10);  /* task card, picked row */
  --color-brand-tint-2: rgba(224, 112, 58, .18);/* chip on, halo around live dots */

  /* ---------- colour: status ---------- */
  --color-success: #2e7d3e;          /* "Live", done checks, approved */
  --color-success-tint: rgba(46, 125, 62, .12);
  --color-warning: #8a5a00;          /* expiring, near quota, waking: rare, text + tint only */
  --color-warning-tint: rgba(196, 140, 20, .14);
  --color-danger: #b3261e;           /* destructive only: delete, block, revoke, refused */
  --color-danger-tint: rgba(179, 38, 30, .10);
  --color-on-danger: #ffffff;        /* text on a danger fill */
  --color-focus: #b54d17;            /* 2px focus ring (= brand-ink) */

  /* ---------- colour: viewer stage (full-screen image and video, F16; identical in light and dark) ---------- */
  --color-stage: #0b0b0c;            /* near-black ground behind photos and video */
  --color-on-stage: #f5f5f7;         /* titles, controls on the stage (16.9:1) */
  --color-on-stage-2: #aeaeb2;       /* secondary text on the stage (8.4:1) */
  --color-stage-line: rgba(255, 255, 255, .16); /* hairlines and dots on the stage */
  --color-stage-glass: rgba(40, 40, 44, .78);   /* bars and pills floating on the stage */

  /* ---------- colour: calendar sources (bars only, never text) ---------- */
  --color-cal-work: #6b95e6;
  --color-cal-personal: #5fb08a;
  --color-cal-client: #4fb3b3;

  /* ---------- colour: type tiles (the only tinted tiles: "a thing Nova made") ---------- */
  --color-tile-doc: #e8f0fe;   --color-tile-doc-ink: #1a5fd0;
  --color-tile-pdf: #fdecec;   --color-tile-pdf-ink: #b3261e;
  --color-tile-sheet: #e3f3ea; --color-tile-sheet-ink: #1f7a45;  /* also the calendar tile */
  --color-tile-page: #eef1ff;  --color-tile-page-ink: #3b4fd1;

  /* ---------- colour: channel renderings (reference pages only, not product UI) ---------- */
  --color-ch-imessage: #0a84ff;  --color-ch-imessage-in: #e9e9eb;
  --color-ch-sms: #34c759;       --color-ch-sms-in: #e9e9eb;
  --color-ch-on: #ffffff;

  /* ---------- orb (identical in light and dark; read by orb.css) ---------- */
  --brand: #e0703a;
  --brand-hi: color-mix(in srgb, var(--brand) 18%, #ffffff);
  --brand-mid: color-mix(in srgb, var(--brand) 58%, #ffffff);
  --brand-deep: color-mix(in srgb, var(--brand) 62%, #201409);
  --brand-ink: color-mix(in srgb, var(--brand) 78%, #201409);
  --orb-0: #e67438; --orb-42: #d66028; --orb-76: rgba(178, 70, 22, .62); --orb-92: rgba(255, 206, 160, .3);
  --orb-glow: rgba(240, 130, 55, .4); --orb-shade: rgba(112, 38, 8, .4); --orb-light: rgba(255, 222, 190, .42);
  --orb-core-a: rgba(255, 215, 154, .8); --orb-core-a2: rgba(247, 166, 102, .5); --orb-core-b: #ea6a2c; --orb-core-b2: rgba(192, 72, 20, .62);
  --orb-sheen: rgba(255, 236, 206, .5); --orb-sheen2: rgba(255, 186, 126, .3);
  --orb-size-xs: 22px;     /* thread rows, public footers (faceless) */
  --orb-size-island: 30px; /* thread island */
  --orb-size-sm: 40px;     /* id card, agent-to-agent, rail */
  --orb-size-md: 48px;
  --orb-size-nested: 56px; /* tab bar */
  --orb-size-sheet: 72px;  /* activity sheet head */
  --orb-size-lg: 88px;
  --orb-size-ob: 96px;     /* onboarding, done marks */
  --orb-size-hero: 112px;  /* Today */

  /* ---------- type ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* reference chrome only */
  --text-display: 32px;  --lh-display: 1.12; --tracking-display: -.02em;   /* .n-display  600 */
  --text-title: 30px;    --lh-title: 1.15;   --tracking-title: -.015em;    /* .n-title    700 */
  --text-question: 28px; /* onboarding question */
  --text-amount: 40px;   /* approval amounts */
  --text-body: 17px;     --lh-body: 1.4;  --lh-prose: 1.45;               /* body, row titles, all inputs (iOS zoom guard) */
  --text-sec: 15px;      --lh-sec: 1.4;                                    /* secondary, card titles */
  --text-island: 14px;   /* island title: the one exception to the scale */
  --text-meta: 13px;     --lh-meta: 1.35;                                  /* metadata, never needed to act */
  --text-label: 12px;    --tracking-label: .07em;                          /* uppercase labels, tab labels */
  --text-badge: 11px;    /* AI badge */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* ---------- spacing (4px base; half steps 2/6/10/14 kept because the prototype leans on them) ---------- */
  --space-0: 0px;
  --space-0h: 2px;
  --space-1: 4px;
  --space-1h: 6px;
  --space-2: 8px;
  --space-2h: 10px;
  --space-3: 12px;
  --space-3h: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;   /* page gutter */
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --gutter: var(--space-6);
  --col: 480px;          /* the phone column, centred at every width */

  /* ---------- sizes ---------- */
  --hit: 44px;           /* minimum target; smaller glyphs grow their box with ::after */
  --row-h: 50px;         /* Today row */
  --row-h-setting: 44px; /* You row */
  --row-h-choice: 52px;  /* one-tap option row */
  --row-h-file: 56px;    /* outcome / file row */
  --field-h: 48px;       /* ask field */
  --composer-h: 58px;    /* composer at rest (112 dictating) */
  --cta-h: 52px;         /* the one large ink pill (onboarding, sign-in, hosted pages) */
  --tabbar-h: 60px;
  --chip-h: 32px;
  --tile: 40px;

  /* ---------- radii ---------- */
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-tile: 10px;
  --radius-field: 28px;  /* ask field / composer */
  --radius-sheet: 28px;  /* sheet and overlay top corners */
  --radius-idcard: 20px;
  --radius-input: 12px;  /* boxed form inputs */
  --radius-badge: 5px;
  --radius-bubble-me: 20px 20px 6px 20px;


  /* ---------- motion ---------- */
  --dur-stagger: 40ms;
  --dur-micro: 80ms;
  --dur-quick: 150ms;
  --dur-fast: 250ms;     /* page enter */
  --dur-medium: 350ms;   /* sheets, orb FLIP, switch */
  --dur-slow: 400ms;
  --dur-very-slow: 500ms;/* message entrance */
  --dur-toast: 2800ms;
  --ease-smooth-out: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
  --ease-bounce: cubic-bezier(.34, 1.36, .64, 1);
  --ease-bounce-strong: cubic-bezier(.34, 3.85, .64, 1);
  --ease-in-out: ease-in-out;
  --distance-micro: 4px; --distance-small: 6px; --distance-base: 8px; --distance-medium: 12px; --distance-large: 30px;

  /* ---------- z-index layers ---------- */
  --z-base: 0;
  --z-fade: 14;      /* fade band under the status bar */
  --z-island: 15;
  --z-controls: 16;  /* ask field, composer, fixed back link, initial */
  --z-pill: 17;      /* "new messages", queued line */
  --z-tabs: 18;
  --z-orb: 19;
  --z-banner: 20;    /* offline / waking / update banners */
  --z-scrim: 25;
  --z-sheet: 30;
  --z-overlay: 40;
  --z-toast: 50;     /* sits above the composer, never above an overlay's actions */

  /* ---------- breakpoints (custom properties cannot be used in @media; use the literals) ----------
     --bp-phone: 480px   phone column; install banner only at <= 480px
     --bp-frame: 520px   reference phone frame only above this
     --bp-public: 720px  public pages become a centred 560px card with shadow
     --bp-rail: 900px    wide screen: tab bar becomes a 248px left rail (O: prototype "Browser" view)
     --bp-wide: 1100px   reference: journey index / side panels
     Custom media (for a PostCSS build, not used here):
     @custom-media --phone (max-width: 480px);
     @custom-media --public-card (min-width: 720px);
     @custom-media --rail (min-width: 900px); */
  --bp-phone: 480px; --bp-frame: 520px; --bp-public: 720px; --bp-rail: 900px; --bp-wide: 1100px;
  --rail-w: 248px;

  /* ---------- safe areas (the reference phone frame overrides these with 47px / 34px) ---------- */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --vh: 100dvh;      /* the viewport height the shell lays out against (frame sets 844px) */

  color-scheme: light;
}

/* ---------- dark: follows the phone unless forced light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #161618; --color-surface: #1f1f22; --color-ink: #f5f5f7; --color-ink-2: #aeaeb2; --color-ink-3: #8e8e93;
    --color-hairline: rgba(255, 255, 255, .1); --color-hairline-strong: rgba(255, 255, 255, .16); --color-line-field: #6e6e73;
    --color-fill: #2c2c2f; --color-dots: rgba(255, 255, 255, .09); --color-glass: rgba(31, 31, 34, .82);
    --color-scrim: rgba(0, 0, 0, .5); --color-shadow: rgba(0, 0, 0, .6); --color-on-ink: #1d1d1f;
    --color-brand-ink: #e0703a; --color-focus: #e0703a;
    --color-success: #6fd08c; --color-success-tint: rgba(111, 208, 140, .14);
    --color-warning: #f2c14e; --color-warning-tint: rgba(242, 193, 78, .14);
    --color-danger: #ff6a5e; --color-danger-tint: rgba(255, 106, 94, .14); --color-on-danger: #1d1d1f;
    --color-tile-doc: rgba(64, 120, 255, .18); --color-tile-doc-ink: #8ab4ff;
    --color-tile-pdf: rgba(255, 122, 104, .16); --color-tile-pdf-ink: #ff8a70;
    --color-tile-sheet: rgba(52, 168, 83, .18); --color-tile-sheet-ink: #6fd08c;
    --color-tile-page: rgba(110, 120, 255, .18); --color-tile-page-ink: #a5b0ff;
    --color-ch-imessage-in: #3a3a3c; --color-ch-sms-in: #3a3a3c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"], [data-theme="dark"] {
    --color-bg: #161618; --color-surface: #1f1f22; --color-ink: #f5f5f7; --color-ink-2: #aeaeb2; --color-ink-3: #8e8e93;
    --color-hairline: rgba(255, 255, 255, .1); --color-hairline-strong: rgba(255, 255, 255, .16); --color-line-field: #6e6e73;
    --color-fill: #2c2c2f; --color-dots: rgba(255, 255, 255, .09); --color-glass: rgba(31, 31, 34, .82);
    --color-scrim: rgba(0, 0, 0, .5); --color-shadow: rgba(0, 0, 0, .6); --color-on-ink: #1d1d1f;
    --color-brand-ink: #e0703a; --color-focus: #e0703a;
    --color-success: #6fd08c; --color-success-tint: rgba(111, 208, 140, .14);
    --color-warning: #f2c14e; --color-warning-tint: rgba(242, 193, 78, .14);
    --color-danger: #ff6a5e; --color-danger-tint: rgba(255, 106, 94, .14); --color-on-danger: #1d1d1f;
    --color-tile-doc: rgba(64, 120, 255, .18); --color-tile-doc-ink: #8ab4ff;
    --color-tile-pdf: rgba(255, 122, 104, .16); --color-tile-pdf-ink: #ff8a70;
    --color-tile-sheet: rgba(52, 168, 83, .18); --color-tile-sheet-ink: #6fd08c;
    --color-tile-page: rgba(110, 120, 255, .18); --color-tile-page-ink: #a5b0ff;
    --color-ch-imessage-in: #3a3a3c; --color-ch-sms-in: #3a3a3c;
    color-scheme: dark;
}

/* ---------- a subtree can force light inside a dark page (reference pages show both themes side by side) ---------- */
[data-theme="light"] {
    --color-bg: #f5f5f7; --color-surface: #ffffff; --color-ink: #1d1d1f; --color-ink-2: #5c5c61; --color-ink-3: #6e6e73;
    --color-hairline: rgba(0, 0, 0, .08); --color-hairline-strong: rgba(0, 0, 0, .12); --color-line-field: #86868b;
    --color-fill: #e9e9eb; --color-dots: rgba(0, 0, 0, .085); --color-glass: rgba(255, 255, 255, .8);
    --color-scrim: rgba(0, 0, 0, .18); --color-shadow: rgba(0, 0, 0, .25); --color-on-ink: #ffffff;
    --color-brand-ink: #b54d17; --color-focus: #b54d17;
    --color-success: #2e7d3e; --color-success-tint: rgba(46, 125, 62, .12);
    --color-warning: #8a5a00; --color-warning-tint: rgba(196, 140, 20, .14);
    --color-danger: #b3261e; --color-danger-tint: rgba(179, 38, 30, .10); --color-on-danger: #ffffff;
    --color-tile-doc: #e8f0fe; --color-tile-doc-ink: #1a5fd0; --color-tile-pdf: #fdecec; --color-tile-pdf-ink: #b3261e;
    --color-tile-sheet: #e3f3ea; --color-tile-sheet-ink: #1f7a45; --color-tile-page: #eef1ff; --color-tile-page-ink: #3b4fd1;
    --color-ch-imessage-in: #e9e9eb; --color-ch-sms-in: #e9e9eb;
    color-scheme: light;
}

/* ---------- tokens that reference colour tokens: re-evaluated on any themed subtree ---------- */
:root, [data-theme] {
  /* ---------- shadows (almost flat: cards are paper with a hairline, no shadow) ---------- */
  --shadow-none: none;
  --shadow-glass: 0 10px 28px -14px var(--color-shadow);   /* tab bar */
  --shadow-island: 0 6px 18px -10px var(--color-shadow);
  --shadow-field: 0 8px 22px -14px var(--color-shadow);    /* ask field, composer */
  --shadow-sheet: 0 -12px 40px -24px var(--color-shadow);
  --shadow-raised: 0 18px 40px -26px var(--color-shadow);  /* id card */
  --shadow-seg: 0 2px 8px -4px var(--color-shadow);        /* segmented selected */
  --shadow-public: 0 30px 80px -40px var(--color-shadow);  /* public page card >= 720px */
  --shadow-orb: drop-shadow(0 8px 12px rgba(120, 50, 10, .16)); /* filter, nested orb */
  --blur-glass: 20px;
  --blur-island: 16px;
}

/* ---------- prototype aliases (read by orb.css; lets prototype snippets drop in) ----------
   Do not use these in new code. */
:root, [data-theme] {
  --n-paper: var(--color-bg); --n-card: var(--color-surface); --n-ink: var(--color-ink); --n-soft: var(--color-ink-2); --n-faint: var(--color-ink-3);
  --n-hair: var(--color-hairline); --n-hair2: var(--color-hairline-strong); --n-fill: var(--color-fill); --n-dots: var(--color-dots);
  --n-glass: var(--color-glass); --n-dim: var(--color-scrim); --n-lift: var(--color-shadow);
  --n-brand: var(--color-brand); --n-brand-ink: var(--color-brand-ink); --n-brand-tint: var(--color-brand-tint); --n-brand-tint2: var(--color-brand-tint-2);
  --n-ok: var(--color-success); --n-danger: var(--color-danger); --n-font: var(--font-sans);
  --n-fs-body: var(--text-body); --n-fs-sec: var(--text-sec); --n-fs-meta: var(--text-meta); --n-fs-label: var(--text-label);
  --n-r-pill: var(--radius-pill); --n-r-card: var(--radius-card); --n-r-tile: var(--radius-tile); --n-hit: var(--hit); --n-col: var(--col);
  --n-ease: var(--ease-standard);
  --ease: var(--ease-standard); --spring: var(--ease-spring); --display: var(--font-sans);
  --ink: var(--color-ink); --ink-soft: var(--color-ink-2); --ink-faint: var(--color-ink-3);
  --duration-fast: var(--dur-fast); --duration-medium: var(--dur-medium); --duration-very-slow: var(--dur-very-slow);
}