/* tokens.css: the single source of truth for brand color, type, and spacing.
 *
 * Imported by every stylesheet on the site: styles.css (public site + portal +
 * 404), deliveries/deliveries.css, clients/clients.css, invoices/invoices.css,
 * and models/models.css. Change a brand value HERE and all five follow.
 *
 * Two things this file cannot reach, because they can't consume a stylesheet:
 *   - functions/api/portal-link.js: the gallery email inlines its hex (email
 *     clients strip <style>/external CSS, so inline is the only option).
 *   - scripts/generate-og.js SVG templates, rasterized to PNG at build time.
 * Both hardcode the accent and must be hand-synced. See docs/site.md.
 *
 * Sub-surface stylesheets alias these into their own local names rather than
 * renaming every usage, so a token change stays a one-line edit per file.
 */

/* Self-hosted Latin subsets (assets/fonts/, OFL; see LICENSE.txt there). Every
 * page gets them through this file, so no page sends visitors to Google. The
 * ?v= stamps are kept current by scripts/fingerprint-assets.js. */
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('/assets/fonts/newsreader-latin-opsz-wght.woff2?v=662a6e2a1a') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 300 500;
    font-display: swap;
    src: url('/assets/fonts/newsreader-latin-italic-opsz-wght.woff2?v=0e959a3459') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 300 500;
    font-stretch: 100%;
    font-display: swap;
    src: url('/assets/fonts/archivo-latin-wght.woff2?v=3ccd4df45c') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-latin-300.woff2?v=b8ef64199d') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-latin-400.woff2?v=2c9bacf024') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-latin-500.woff2?v=3a2668b94b') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ── Surfaces (dark, the default) ─────────────────────────────────────
       Slightly blue-black rather than neutral: the accent is a cool cyan and
       a warm-neutral ground made it read muddy next to it. */
    --bg-deep:     #08090b;
    --bg-primary:  #101114;
    --bg-elevated: #16181c;
    --bg-card:     #1a1c21;

    /* ── Brand accent ────────────────────────────────────────────────────
       --accent-primary is the everyday cyan, softened from the original
       #00e5ff so it can sit under a serif without vibrating. --accent-hot
       keeps the original for the few places that still want the hard HUD
       cyan (small glows, the dev-mode readouts). */
    --accent-primary:   #6fd9e8;
    --accent-hot:       #00e5ff;
    --accent-secondary: #ff3d00;
    --accent-glow:      rgba(111, 217, 232, 0.1);

    --text-primary:   #f0f0f0;
    --text-secondary: #a0a0a0;
    /* Muted is the lightest gray that still clears WCAG AA (4.5:1) for small
       text on every dark surface above, --bg-card included. */
    --text-muted:     #8a8a8a;

    --border-subtle: rgba(255, 255, 255, 0.12);
    --border-accent: rgba(111, 217, 232, 0.3);

    --grid-color:     rgba(111, 217, 232, 0.02);
    --scanline-color: rgba(0, 0, 0, 0.03);

    /* Dotted leader between a rate row's name and its price. */
    --dots-color: rgba(240, 240, 240, 0.22);

    /* ── Status hues ─────────────────────────────────────────────────────
       Shared by the client hub and the invoice renderer. Paid is green;
       every unpaid state (due and past due) deliberately shares one orange,
       because "due soon" and "late" should not compete for attention. */
    --status-paid:      #6dd28b;
    --status-due:       #ff9f43;
    /* Part-paid invoice: deposit in, balance outstanding. */
    --status-deposit:   #4ec3d9;
    --status-overdue:   #ff9f43;
    --status-paid-tint: rgba(109, 210, 139, 0.09);
    --status-due-tint:  rgba(255, 159, 67, 0.07);

    /* ── Type registers ──────────────────────────────────────────────────
       Three families, four registers:
         serif      headlines and body prose, the editorial voice
         sans       UI text, names, addresses, anything read quickly
         mono       tight technical readouts (homepage HUD, stats)
         mono-soft  labels, eyebrows and captions on client surfaces
       Both monos are IBM Plex Mono: a second mono family (JetBrains) cost
       three more font files on the homepage for a difference few could see.
       The registers stay separate so either can change again in one line. */
    --font-serif:     'Newsreader', Georgia, serif;
    --font-sans:      'Archivo', system-ui, -apple-system, sans-serif;
    --font-mono:      'IBM Plex Mono', monospace;
    --font-mono-soft: 'IBM Plex Mono', monospace;

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --header-h: 60px;
    --measure:  1400px;
    --gutter:   clamp(1rem, 4vw, 2.6rem);

    /* ── Spacing ─────────────────────────────────────────────────────────── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  2rem;
    --space-xl:  4rem;
    --space-2xl: 8rem;

    /* ── Motion ──────────────────────────────────────────────────────────── */
    --ease:            cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
    --duration-fast:   150ms;
    --duration-normal: 300ms;
    --duration-slow:   600ms;
}

/* Light mode is the public site only. The delivery, client-hub, invoice, and
 * model pages never set data-theme, so this block cannot fire on them.
 *
 * The accent darkens to #006f8c here rather than staying #6fd9e8: accent
 * text has to clear WCAG AA (4.5:1) on white and on the #f0f1f2 elevated
 * surface, and the lighter #0088aa it replaced managed neither. The muted gray
 * is held to the same bar on --bg-card. test/contrast.test.js checks both. */
[data-theme="light"] {
    --bg-deep:     #f0f1f2;
    --bg-primary:  #ffffff;
    --bg-elevated: #f0f1f2;
    --bg-card:     #e9ecef;

    --accent-primary:   #006f8c;
    --accent-hot:       #006f8c;
    --accent-secondary: #d63200;
    --accent-glow:      rgba(0, 111, 140, 0.12);

    --text-primary:   #1a1a1a;
    --text-secondary: #404040;
    --text-muted:     #636363;

    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-accent: rgba(0, 111, 140, 0.28);

    --grid-color:     rgba(0, 111, 140, 0.03);
    --scanline-color: rgba(0, 0, 0, 0.02);

    --dots-color: rgba(26, 26, 26, 0.2);
}