/* Copied verbatim from apps/tasks/public/styles-layers/tokens.css (Opal
   Terminal MVP, D6). Extracting a shared packages/design-tokens is a
   deliberate later step — do not hand-edit; re-copy from the source. */
@layer tokens {
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/inter-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/inter-400i.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/inter-500.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/inter-600.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/inter-700.woff2') format('woff2');
  }
  /* Metric-matched fallback — pairs with Inter 400/600 preload (PERF-MAIN-LCP-02). */
  @font-face {
    font-family: 'Inter Fallback';
    font-style: normal;
    font-weight: 400;
    src: local('Arial');
    size-adjust: 107.64%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
  }
  :root {
    /* ---- LAYER 1: primitives (raw scales — not for component use) ----------
     Grounded in the BlackOpal seed deck: a true-black "Opal Black" body, a
     neutral grey text ramp, and a single signature vermilion flash (#fe3901).
     The rest of the flash spectrum is DERIVED from that anchor by colour
     theory — analogous amber (+30°), complementary azure (+180°), triadic
     violet (+240°), tetradic magenta (+300°), plus a green — held at a shared
     saturation/lightness so they read as one family against black. Each hue
     has a base (on black), a -soft (text on a low-alpha fill), a -strong
     (borders/rules) and a -lt (light-theme, on white) variant. */
    /* Opal Black body + surfaces (dark). */
    --p-black: #000000;
    --p-ink-1: #0c0c0e;
    --p-ink-2: #151519;
    --p-line: #2b2b30;
    --p-line-2: #3a3a40;
    /* Paper body + surfaces (light). */
    --p-paper-0: #ffffff;
    --p-paper-50: #f7f8fb;
    --p-paper-100: #f1f3f8;
    --p-paper-200: #e3e6ee;
    /* Neutral text ramp (deck greys; faint tuned for WCAG AA on near-black). */
    --p-white: #f4f4f5;
    --p-grey-1: #c2c2c6;
    --p-grey-2: #9a9aa1;
    --p-ink-text: #15151a;
    --p-slate-dim: #5a6172;
    --p-slate-faint: #6b7282;
    --p-white-pure: #ffffff;
    /* Signature flash — the deck vermilion (exact), + its light-theme variant. */
    --p-vermilion: #fe3901;
    --p-vermilion-lt: #d43b11;
    /* Flash spectrum — base (dark, on black). */
    --p-red: #f5653d;
    --p-amber: #f5c13d;
    --p-green: #3df58a;
    --p-azure: #3dcdf5;
    --p-violet: #653df5;
    --p-magenta: #f53dcd;
    --p-future: #7c7c85;
    /* Flash spectrum — soft (text/figure on a low-alpha fill). */
    --p-red-soft: #f7b3a1;
    --p-amber-soft: #f7dfa1;
    --p-green-soft: #a1f7c5;
    --p-azure-soft: #a1e5f7;
    --p-violet-soft: #b3a1f7;
    --p-magenta-soft: #f7a1e5;
    /* Flash spectrum — strong (borders, left-rules, focus). */
    --p-red-strong: #f94310;
    --p-amber-strong: #f9b710;
    --p-green-strong: #10f971;
    --p-azure-strong: #10c6f9;
    --p-violet-strong: #4310f9;
    --p-magenta-strong: #f910c6;
    /* Flash spectrum — light theme (on white). */
    --p-red-lt: #d43b11;
    --p-amber-lt: #d49d11;
    --p-green-lt: #11d462;
    --p-azure-lt: #11aad4;
    --p-violet-lt: #3b11d4;
    --p-magenta-lt: #d411aa;

    /* ---- LAYER 2: semantic (dark) ----------------------------------------- */
    --bg: var(--p-black);
    --bg-elev: var(--p-ink-1);
    /* Alias for the first elevation step (v2 component rules). */
    --bg-elev-1: var(--bg-elev);
    --bg-elev-2: var(--p-ink-2);
    --border: var(--p-line);
    /* Stronger divider / Work Item outline (the deck's brighter hairline). */
    --border-strong: var(--p-line-2);
    --text: var(--p-white);
    --text-dim: var(--p-grey-1);
    /* Alias for muted secondary text (v2 component rules). */
    --text-muted: var(--text-dim);
    /* Faint small text (Work Item dates, counts, meta) — kept >= WCAG AA on near-black. */
    --text-faint: var(--p-grey-2);
    --accent: var(--p-vermilion);
    --focus-ring-color: var(--accent);
    /* Sustained editing shells (composer, note draft) — accent tint, not full flash. */
    --focus-ring-soft: color-mix(in srgb, var(--accent) 28%, transparent);
    /* Feed keyboard-nav location — neutral lift, no vermilion ring. */
    --focus-nav-border: color-mix(in srgb, var(--text) 18%, var(--border));
    --danger: var(--p-red-soft);
    /* Stage chip ramp — position in a lifecycle sequence, never a stage name. */
    --ramp-0: var(--p-violet);
    --ramp-1: var(--p-red);
    --ramp-2: var(--p-amber);
    --ramp-3: var(--p-azure);
    --ramp-4: var(--p-future);
    --ramp-ok: var(--p-green);
    --ramp-bad: var(--p-red-soft);
    --confidential: var(--p-magenta);
    /* Warning fill (warning chips / notes). */
    --warn: var(--p-red-strong);
    /* Text on a saturated/accent fill: the flashes are bright, so dark text holds
     AA on buttons, badges, and timeframe chips (the body stays near-monochrome). */
    --text-on-accent: #140a06;
    /* Status roles (paired with text/shape, never colour alone). */
    --status-danger: var(--p-red-soft);
    --status-warn: var(--p-amber);
    --status-info: var(--p-azure);
    --status-success: var(--p-green);
    /* Hyperlinks and attachment affordances. */
    --link: var(--p-azure);
    /* Kind conversion control (modal convert; neutral secondary, not urgency). */
    --gesture-convert: var(--text-dim);
    /* Needs attention now (due-now counters, urgency tints). */
    --status-urgent: var(--p-red);
    /* The viewer's personal Focus (pin/focus affordances). */
    --focus-accent: var(--p-violet);
    /* Relevance (Morning Brief / feed chips) — paired with a label. */
    --relevance-warning: var(--status-urgent);
    --relevance-news: var(--accent);
    --relevance-committed: var(--p-red);
    --relevance-engaged: var(--p-azure);

    /* ---- Type roles ------------------------------------------------------- */
    --font-sans:
      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:
      'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
      monospace;
    /* Back-compat alias (existing rules reference --mono). */
    --mono: var(--font-mono);
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 15px;
    --text-xl: 16px;
    --text-2xl: 20px;
    --text-3xl: 28px;
    --weight-semibold: 600;

    /* ---- Space / radius / elevation / motion ------------------------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 999px;
    --radius-tag: var(--radius-pill);
    /* Spacing (de-facto standards) */
    --space-1_5: 6px;
    --space-2_5: 10px;
    --space-3_5: 14px;
    --space-4_5: 18px;

    /* Radii */
    --radius-2xl: 14px;
    --radius-sheet: 16px;

    /* Elevation */
    --elev-modal: 0 20px 60px rgba(0, 0, 0, 0.45);
    --elev-sheet: 0 -8px 40px rgba(0, 0, 0, 0.45);
    --elev-dropdown: 0 8px 28px rgba(0, 0, 0, 0.4);
    --elev-toast: 0 4px 14px rgba(0, 0, 0, 0.25);

    /* Motion primitives. Components consume the semantic roles below rather
       than choosing their own duration, easing, travel, or opacity. */
    --motion-micro: 0.12s;
    --motion-fast: 0.15s;
    --motion-base: 0.2s;
    --motion-overlay: 0.24s;
    --motion-sheet: 0.26s;
    --motion-feedback: 0.3s;
    --motion-success: 0.8s;
    --motion-ease-standard: ease;
    --motion-ease-enter: ease-out;
    --motion-ease-exit: ease;
    --motion-ease-move: ease;
    --motion-ease-settle: ease-out;
    --motion-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);

    /* Semantic motion grammar. Enter and exit explain origin/destination;
       move preserves object identity; settle and success confirm state.
       Error is deliberately immediate and stationary: color + copy carry it. */
    --motion-enter-duration: var(--motion-base);
    --motion-enter-distance: var(--space-1_5);
    --motion-enter-opacity: 0;
    --motion-exit-duration: var(--motion-overlay);
    --motion-exit-distance: var(--space-2_5);
    --motion-exit-opacity: 0;
    --motion-move-duration: var(--motion-fast);
    --motion-move-opacity: 0.72;
    --motion-move-scale: 0.985;
    --motion-settle-duration: var(--motion-base);
    --motion-success-duration: var(--motion-success);
    --motion-error-duration: 0s;

    /* Controls */
    --control-h-sm: 28px;
    --control-h-lg: 36px;

    /* Semantic status (replace Tailwind hex) */
    --danger-bg: #450a0a;
    --danger-border: #b91c1c;
    --danger-text: #fecaca;
    --scrim-strong: rgba(0, 0, 0, 0.55);

    /* Shared control height — the base rhythm every interactive control (the
       .btn family, header controls) sits on, so buttons line up across the app
       instead of each surface picking an ad-hoc height. */
    --control-h: 32px;
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --elev-2: 0 8px 24px rgba(0, 0, 0, 0.4);
    /* Off-canvas drawer / modal backdrop dim (sidebar + chat People drawer). */
    --scrim: rgba(0, 0, 0, 0.5);
    /* Named breakpoints (documented for reference; media queries can't read vars). */
    --bp-mobile: 720px;
    --bp-wide: 1200px;
    /* Horizontal inset for page header content and fixed header chrome (bell, theme). */
    --header-content-inset-x: 32px;
    --header-chrome-btn-size: 34px;
    --header-chrome-btn-gap: 8px;

    /* Browser default; standalone iOS PWA overrides to 100vh before first paint
       (WebKit #254868 — 100dvh under-reports in installed apps). */
    --app-height: 100dvh;

    /* Checkmark used as a CSS mask (fill comes from the element's background). */
    --check-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  }
  body.ui-sharp {
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-tag: var(--radius-lg);
    /* Cross-view normalization: connected-row dividers + sublane heads (B gentle). */
    --ui-sharp-divider: var(--border);
    --ui-sharp-row-band: var(--bg-elev-2);
    --ui-sharp-sublane-head: color-mix(
      in srgb,
      var(--accordion-tint) 22%,
      var(--bg-elev-2)
    );
    --ui-sharp-sublane-nest: color-mix(
      in srgb,
      var(--accordion-tint) 12%,
      var(--bg-elev)
    );
    /* Mosaic sublane heads + item-compact closed row share one phone-stack band:
       32px content track + flush top + space-1 bottom ≈ 36px. */
    --ui-sharp-sublane-row: 32px;
    --ui-sharp-sublane-head-min: calc(
      var(--ui-sharp-sublane-row) + var(--space-1)
    );
  }
  :root[data-theme='light'] {
    /* Semantic overrides for light. Every color name is listed explicitly (those
     equal to the dark value keep today's appearance — no surface branches on
     theme; a retheme only edits values here). */
    --bg: var(--p-paper-50);
    --bg-elev: var(--p-paper-0);
    --bg-elev-2: var(--p-paper-100);
    --border: var(--p-paper-200);
    --border-strong: var(--p-slate-faint);
    --text: var(--p-ink-text);
    --text-dim: var(--p-slate-dim);
    /* Faint small text kept >= WCAG AA against white. */
    --text-faint: var(--p-slate-faint);
    --accent: var(--p-vermilion-lt);
    --focus-ring-color: var(--accent);
    --focus-ring-soft: color-mix(in srgb, var(--accent) 28%, transparent);
    --focus-nav-border: color-mix(in srgb, var(--text) 18%, var(--border));
    --danger: var(--p-red-lt);
    --ramp-0: var(--p-violet-lt);
    --ramp-1: var(--p-red-lt);
    --ramp-2: var(--p-amber-lt);
    --ramp-3: var(--p-azure-lt);
    --ramp-4: var(--p-future);
    --ramp-ok: var(--p-green-lt);
    --ramp-bad: var(--p-red-lt);
    --confidential: var(--p-magenta-lt);
    --warn: var(--p-red-lt);
    /* Light flashes are darker (L45), so white text holds on the fills. */
    --text-on-accent: var(--p-white-pure);
    --status-danger: var(--p-red-lt);
    --status-warn: var(--p-amber-lt);
    --status-info: var(--p-azure-lt);
    --status-success: var(--p-green-lt);
    --link: var(--p-azure-lt);
    --gesture-convert: var(--text-dim);
    --status-urgent: var(--p-red-lt);
    --focus-accent: var(--p-violet-lt);
    --relevance-warning: var(--status-urgent);
    --relevance-news: var(--accent);
    --relevance-committed: var(--p-red-lt);
    --relevance-engaged: var(--p-azure-lt);
    --danger-bg: #fef2f2;
    --danger-border: #f87171;
    --danger-text: #991b1b;
  }

  * {
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  *::-webkit-scrollbar {
    display: none;
  }
  html,
  body {
    margin: 0;
    padding: 0;
    min-height: var(--app-height);
    background: var(--bg);
    color: var(--text);
    font-family:
      -apple-system, BlinkMacSystemFont, 'Inter', 'Inter Fallback', 'Segoe UI',
      Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
    overscroll-behavior: none;
  }
  @keyframes refresh-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes bo-overlay-in {
    from {
      background: rgba(0, 0, 0, 0);
    }
  }
  @keyframes bo-overlay-out {
    to {
      background: rgba(0, 0, 0, 0);
    }
  }
  @keyframes bo-sheet-in {
    from {
      transform: translateY(100%);
    }
  }
  @keyframes bo-sheet-out {
    to {
      transform: translateY(100%);
    }
  }
  @keyframes bo-settle-flash {
    0% {
      background-color: color-mix(in srgb, var(--accent) 20%, transparent);
    }
  }
  @keyframes count-pop {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
  .count-pop {
    animation: count-pop var(--motion-feedback) var(--motion-ease-settle);
  }
}