/* =============================================================
   tokens.css — Agents design system · single source of truth

   Promoted from the Fractional CFO letter, which is the reference
   implementation of the system. The brand is DARK EDITORIAL:

     · A true cool near-black ground (#060b0e) — matched to the
       existing site — with one emerald-green accent.
     · Two type voices, no third: SOURCE SERIF 4 (italic) is the
       expressive voice (thesis, pull quotes, marginalia); MANROPE
       is the working voice (body, UI, labels, and figure timestamps).
       (An earlier Special Elite typewriter cameo has been retired.)
     · Product moments are SCHEMATIC WIREFRAME windows (assets/
       wireframes.css) — hairline line-art on the dark ground, one
       accent, frame variants gray/white/emerald. (The platform
       --tint-* tokens below are legacy from the earlier photographic
       mockups; the wireframes don't need them.)

   New work consumes the NEW tokens. The legacy --color-* aliases at
   the bottom keep the pre-dark light pages (Home, the audit report)
   rendering until they are migrated; do not use them in new work.
   ============================================================= */

:root {
    /* ===== Surfaces (dark) ================================== */
    --paper:        #060b0e;                 /* page ground — sampled from the live site */
    --surface:      #10191d;                 /* raised panel / card */
    --surface-2:    #16222a;                 /* second elevation, hover */

    /* ===== Ink (text on dark) ============================== */
    --ink:          oklch(94% 0.004 210);    /* body + headings (AAA on paper) */
    --ink-soft:     oklch(76% 0.008 215);    /* lede, dek, figure notes (AAA) */
    --ink-dust:     oklch(63% 0.012 215);    /* byline, captions, footnotes (AA, 5.8:1) */
    --rule:         oklch(30% 0.012 220);    /* hairlines, borders, device rings */

    /* ===== Accent (emerald — the one brand color) ==========
       Brand green, sampled from alxpck.com: #1a8a5c. Used at full
       strength for the drop cap, the CTA, pull-rule, section product
       line, and the wireframe accent. Reads ~4.8:1 on --paper, so it
       is legible as large/medium text as well as fills. */
    --accent:       oklch(56.2% 0.12 159.9);    /* #1a8a5c — drop cap, CTA, pull rule, accents */
    --accent-strong:oklch(66% 0.13 160);         /* hover / lighter sibling */
    --accent-soft:  oklch(56.2% 0.12 159.9 / 0.3); /* selection wash, faint fills */
    --accent-label: oklch(62% 0.125 160);        /* small uppercase Manrope labels (site motif) */

    /* ===== Signal (used INSIDE light figures / data) ======= */
    --positive:     #137333;
    --positive-soft:#e6f4ea;
    --negative:     #c5221f;
    --warning:      #8a5e00;
    --warning-soft: #fff7e6;

    /* ===== Platform tints (faux-UI chrome, real vendor hues) */
    --tint-gmail:    oklch(58% 0.18 25);
    --tint-gcal:     oklch(58% 0.15 245);
    --tint-drive:    oklch(70% 0.16 90);
    --tint-gchat:    oklch(55% 0.14 150);
    --tint-sheets:   oklch(55% 0.16 150);
    --tint-slack:    oklch(45% 0.18 295);
    --tint-notion:   oklch(20% 0.012 80);

    /* ===== Type: faces ===================================== */
    /* Two voices, no third. Serif = expressive (italic display, quotes,
       marginalia). Sans = working (body, UI, labels, and figure
       timestamps). The earlier Special Elite typewriter cameo has been
       retired; --font-typewriter is kept as a Manrope alias only so old
       references keep resolving. */
    --font-serif:      "Source Serif 4", "Iowan Old Style", Georgia, serif;
    --font-sans:       "Manrope", system-ui, -apple-system, sans-serif;
    --font-display:    var(--font-serif);    /* display IS the italic serif */
    --font-typewriter: var(--font-sans);     /* retired typewriter — aliased to Manrope */
    --font-tw:         var(--font-sans);     /* figure timestamps (was Special Elite) */
    --font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code/data ONLY — never labels or eyebrows */
    /* app-native sans for the inside of mockups (keeps Slack feeling like Slack) */
    --font-app:        -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

    /* ===== Type: sizes (clamp, fluid) ====================== */
    --type-thesis:   clamp(2rem, 2.2vw + 1.25rem, 2.85rem);   /* serif italic opener */
    --type-headline: clamp(2rem, 2.5vw + 1.25rem, 2.85rem);   /* Manrope 800 assertive headline */
    --type-section:  clamp(1.5rem, 1vw + 1.15rem, 1.75rem);   /* serif section head */
    --type-dek:      clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);/* sans audience line */
    --type-quote:    clamp(1.25rem, 1vw + 1rem, 1.5rem);      /* serif italic pull quote */
    --type-price:    clamp(2.25rem, 2vw + 1.5rem, 3rem);      /* Manrope tabular number */
    --type-body:     1.0625rem;                               /* Manrope body */
    --type-body-sm:  0.9375rem;
    --type-caption:  0.875rem;
    --type-micro:    0.78rem;

    /* ===== Type: leading =================================== */
    --lh-thesis:  1.18;
    --lh-section: 1.2;
    --lh-body:    1.7;
    --lh-snug:    1.45;
    --lh-tight:   1.3;

    /* ===== Type: tracking ================================== */
    --track-thesis: -0.015em;
    --track-section:-0.012em;
    --track-body:   -0.006em;
    --track-label:   0.04em;   /* small uppercase labels */

    /* ===== Reading geometry ================================ */
    --col:       38rem;        /* prose reading column (~60ch at body size) */
    --col-wide:  52rem;        /* figures / breakout */

    /* ===== Space (rem, ~1.5x ratio) ======================== */
    --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
    --space-7: 2rem;     --space-8: 2.5rem;  --space-9: 3rem;
    --space-10: 4rem;    --space-11: 5rem;   --space-12: 6rem;
    --space-14: 8rem;
    --space-section: clamp(2.5rem, 6vw, 6rem);

    /* ===== Layout (legacy containers, still used) ========== */
    --container: 75rem;
    --container-narrow: 56rem;
    --container-text: 44rem;
    --gutter: clamp(1rem, 4vw, 2rem);

    /* ===== Radius ========================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-phone: 44px;
    --radius-full: 9999px;

    /* ===== Shadow / glow (tuned for the dark ground) ======= */
    --shadow-device:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 0 1px oklch(40% 0.01 215),
        0 50px 90px -44px rgba(0,0,0,0.8),
        0 14px 34px -16px rgba(0,0,0,0.55);
    --shadow-card: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(0,0,0,0.7);

    /* ===== Motion ========================================== */
    --motion-fast: 120ms;
    --motion-default: 180ms;
    --motion-slow: 260ms;
    --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
    /* ambient loop timings (in-figure life, never blanks content) */
    --loop-breathe: 4.5s;
    --loop-pulse: 4s;
    --loop-glow: 9s;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms; --motion-default: 0ms; --motion-slow: 0ms;
        --loop-breathe: 0ms; --loop-pulse: 0ms; --loop-glow: 0ms;
    }
}

/* =============================================================
   LEGACY ALIASES — pre-dark light marketing pages (Home.html,
   Usability Audit). Kept so those pages keep rendering until they
   are migrated to the dark system. Do NOT use in new work.
   ============================================================= */
:root {
    --color-bg: oklch(98.4% 0.004 95);
    --color-surface: oklch(96.5% 0.006 95);
    --color-surface-strong: oklch(93.5% 0.009 95);
    --color-surface-inverse: oklch(20% 0.025 255);
    --color-fg: oklch(22% 0.022 255);
    --color-fg-muted: oklch(48% 0.025 255);
    --color-fg-subtle: oklch(64% 0.018 255);
    --color-fg-inverse: oklch(96% 0.005 95);
    --color-border: oklch(89% 0.008 95);
    --color-border-strong: oklch(80% 0.012 95);
    --color-border-inverse: oklch(30% 0.03 255);
    --color-accent: oklch(32% 0.085 255);
    --color-accent-hover: oklch(26% 0.085 255);
    --color-accent-soft: oklch(93% 0.035 255);
    --color-accent-fg: oklch(96% 0.005 95);
    --color-positive: oklch(50% 0.09 155);
    --color-positive-soft: oklch(94% 0.04 155);
    --color-warning: oklch(58% 0.13 75);
    --color-warning-soft: oklch(95% 0.05 80);

    --tint-outlook: oklch(45% 0.13 250);
    --tint-ocal: oklch(45% 0.13 250);
    --tint-teams: oklch(45% 0.14 295);
    --tint-onedrive: oklch(48% 0.13 245);
    --tint-l10: oklch(42% 0.14 280);
    --tint-taxdome: oklch(48% 0.14 240);
    --tint-quickbooks: oklch(50% 0.13 150);

    --type-display: clamp(2.25rem, 5vw + 1rem, 4.5rem);
    --type-h1: clamp(1.875rem, 3vw + 0.875rem, 3rem);
    --type-h2: clamp(1.5rem, 1.5vw + 0.875rem, 2.125rem);
    --type-h3: clamp(1.1875rem, 0.5vw + 1rem, 1.375rem);
    --type-body-lg: clamp(1.0625rem, 0.5vw + 0.875rem, 1.1875rem);
    --type-lh-display: 1.05;
    --type-lh-h1: 1.08;
    --type-lh-h2: 1.15;
    --type-lh-tight: 1.25;
    --type-lh-snug: 1.4;
    --type-lh-normal: 1.55;
    --type-tracking-display: -0.018em;
    --type-tracking-tight: -0.005em;
    --type-tracking-wide: 0.08em;
    --type-tracking-mono: -0.005em;
    --tracking-mono: -0.005em;
    --tracking-eyebrow: 0.08em;

    --shadow-subtle: 0 1px 2px oklch(20% 0.02 255 / 0.04), 0 1px 1px oklch(20% 0.02 255 / 0.03);
    --shadow-elevated: 0 4px 8px oklch(20% 0.02 255 / 0.06), 0 16px 48px -12px oklch(20% 0.02 255 / 0.14);
    --space-16: 8rem;
}