/*
 * ZFS Design System — tokens.
 * Dark neutral canvas (near-black, hairline borders — the shared language of
 * refero-designs/data/{featurebase,linear,raycast,resend,vercel}) built
 * around our OWN logo blue as the single accent, not a borrowed hue.
 * Grey scale is ordered darkest (0) -> lightest (950), so --grey-0 is the
 * page void and --grey-900/950 are nearly-white text/surfaces. Existing
 * rules in app.css that reference these variables by name pick up the dark
 * theme automatically.
 */
:root {
    /* Brand blues — ZFS Design System v2: one scale derived from the logo blue
       (hue 227), 600 = master #002EF4. 50-200 stay translucent washes on the
       dark canvas; 300+ are solid steps. 300 = focus ring, 400 = small blue
       text, 500 = links/strokes/CTA hover, 600 = filled buttons, 800 = pressed. */
    --blue-50:  rgba(0, 46, 244, 0.10);
    --blue-100: rgba(0, 46, 244, 0.18);
    --blue-200: rgba(0, 46, 244, 0.32);
    --blue-300: #8FA7FF;
    --blue-400: #5C7FFF;
    --blue-500: #2453FF; /* signal blue — links, icons, strokes on dark */
    --blue-600: #002EF4; /* master logo blue — filled buttons */
    --blue-700: #002CCC;
    --blue-800: #00229E;
    --blue-900: #001870;
    --blue-950: #000D3D;

    /* Gold — supporting accent (hue 44), 500 = master. Gold fills always take
       --accent-fg text; gold is never text on a light background. */
    --gold-50:  #FFFAEB;
    --gold-100: #FFF1CC;
    --gold-200: #FFE499;
    --gold-300: #FFD257;
    --gold-400: #FFC933;
    --gold-500: #FFC20E;
    --gold-600: #D69D00;
    --gold-700: #A37800;
    --gold-800: #7A5A00;
    --gold-900: #523C00;
    --accent: var(--gold-500);
    --accent-fg: #05070D;
    --slate-blue: #8f94a6;

    /* Neutral greys — dark scale, darkest first */
    --grey-0:   #050608; /* void canvas — page background */
    --grey-50:  #0a0b0f; /* ink surface — inset regions, filled dark controls */
    --grey-100: #0f1219; /* charcoal panel — cards, demo panels, borders */
    --grey-200: #151822; /* steel panel — raised dark controls, secondary layers */
    --grey-300: #1f1e2a; /* slate edge — hairline borders */
    --grey-400: #33323f; /* interpolated — hover fills, disabled surfaces */
    --grey-500: #8f94a6; /* quiet slate — metadata, tertiary text */
    --grey-600: #b2b8cd; /* misted slate — muted body copy, secondary links */
    --grey-700: #dee1ea; /* frost text — lead paragraphs */
    --grey-800: #eceef3; /* interpolated — near-white surfaces */
    --grey-900: #ffffff; /* cloud white — headings, icons */
    --grey-950: #ffffff; /* cloud white — filled action surfaces, logo marks */

    /* Type scale */
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-2xl: 26px;
    --fs-3xl: 32px;
    --fs-4xl: 42px;

    /* Fonts — Geist for headings (a geometric sans with confident negative
       tracking at display sizes, per the Vercel reference in refero-designs:
       gives Zonal its own identity instead of Inter everywhere), Inter for
       body/UI copy where its neutral, highly-legible shapes suit dense
       dashboard text best. */
    --font-heading: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Display face (v2): marketing hero h1, stat/price figures and eyebrow labels only; never body, nav, forms, dashboard, admin or checkout. */
    --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Chamfer scale (v2): px cut for clip-path corners. Promotional elements on marketing pages only; buttons, inputs, tables, modals and product UI stay rounded. */
    --chamfer-xs: 6px;
    --chamfer-sm: 10px;
    --chamfer-md: 20px;
    --chamfer-lg: 40px;
    --chamfer-xl: 80px;

    /* Motion (v2) */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 320ms;
    --motion-hero: 720ms;
    --ease-cut: cubic-bezier(.2, .7, .2, 1);
    --ease-snap: cubic-bezier(.7, 0, .2, 1);

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-buttons: 12px;
    --radius-inputs: 12px;
    --radius-links: 12px;
    --radius-cards: 16px;
    --radius-images: 24px;
    --radius-pill: 9999px;

    /* Surface tiers (v2.3): marketing sections alternate between these so the dark canvas has rhythm.
       0 = page, 1 = raised band, brand = deep blue band. Cards inside a band use --card (see app.css). */
    --surface-0: var(--grey-0);
    --surface-1: var(--grey-100);
    --surface-brand: var(--blue-950);

    /* Status colors — translucent chips readable on a near-black canvas */
    --success-bg: rgba(34, 197, 94, 0.14);  --success-fg: #4ade80;
    --warning-bg: rgba(245, 158, 11, 0.16); --warning-fg: #fbbf24;
    --error-bg:   rgba(248, 113, 113, 0.16); --error-fg:  #f87171;
    --info-bg:    rgba(112, 100, 242, 0.16); --info-fg:   #a5a0f7;
}