/* ============================================================================
 * FNF Inventory — Design Tokens
 * ----------------------------------------------------------------------------
 * Single source of truth for design tokens across every public/*.html file.
 * Created in Phase 1 of the OPTIMIZATION_PLAN.md refactor (2026-05-24).
 *
 * Why this exists
 *   Before: each HTML file had its own :root block with subtly different
 *   values — three different shades of "near-black" backgrounds, two purples
 *   (#7C3AED vs #8B5CF6), three different font stacks (Inter, Space Grotesk,
 *   system). Users felt the brand fragment between every navigation.
 *
 *   After: this file is the canonical source. Every page links it. Naming
 *   aliases preserve compatibility with the existing variable references
 *   (--bg-tertiary in receive.html, --bg-dark in landing/legal pages,
 *   --error in app.html, --danger in receive.html, etc.) without forcing
 *   a rename pass through tens of thousands of CSS rules.
 *
 * Categories: fonts → colors (brand, neutrals, semantic) → typography scale
 *   → radius → spacing → motion → light-theme overrides → utilities.
 * ============================================================================ */

/* === Fonts (self-hosted woff2 in /fonts/) =================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/inter-800.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* === Dark theme defaults (canonical values) ================================ */
:root {
    /* Typography stacks */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Brand purple — tonal scale (Tailwind violet palette) */
    --purple-50:  #F5F3FF;
    --purple-100: #EDE9FE;
    --purple-200: #DDD6FE;
    --purple-300: #C4B5FD;
    --purple-400: #A78BFA;
    --purple-500: #8B5CF6;
    --purple-600: #7C3AED;   /* PRIMARY brand color */
    --purple-700: #6D28D9;
    --purple-800: #5B21B6;
    --purple-900: #4C1D95;

    /* Legacy aliases — existing CSS references these names. Mapping to the
     * tonal scale lets us keep ~thousands of var(--fnf-purple) callsites
     * unchanged while unifying the underlying values across all pages. */
    --fnf-purple:       var(--purple-600);
    --fnf-purple-dark:  var(--purple-800);
    --fnf-purple-light: var(--purple-400);
    --fnf-purple-hover: var(--purple-700);
    --fnf-purple-glow:  rgba(124, 58, 237, 0.3);

    /* Backgrounds — unified to a single near-black across all pages */
    --bg-primary:   #09090B;   /* zinc-950 — base layer */
    --bg-secondary: #141416;
    --bg-card:      #1C1C1F;
    --bg-elevated:  #242428;
    /* Aliases for the historical naming variants found in receive.html
     * (--bg-tertiary) and the landing / legal / help pages (--bg-dark). */
    --bg-tertiary:  var(--bg-card);
    --bg-dark:      var(--bg-primary);

    /* Text */
    --text-primary:   #FAFAFA;
    --text-secondary: #A1A1AA;
    --text-muted:     #8A8A93;   /* bumped from #71717A — WCAG AA on cards */

    /* Borders */
    --border-color:  #27272A;
    --border-strong: #3F3F46;
    --border:        var(--border-color);   /* alias used by receive.html */

    /* Semantic colors */
    --success: #10B981;
    --warning: #F59E0B;
    --danger:  #EF4444;
    --info:    #3B82F6;
    --error:   var(--danger);   /* alias used by app.html */

    /* Type scale */
    --text-xs:   11px;   /* labels, micro */
    --text-sm:   13px;   /* secondary text */
    --text-base: 15px;   /* body */
    --text-lg:   17px;   /* emphasized body */
    --text-xl:   20px;   /* card headings */
    --text-2xl:  24px;   /* section headings */
    --text-3xl:  32px;   /* page headings */
    --text-4xl:  48px;   /* hero stats */

    /* Border radius — five values total */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* Spacing — strict 4px grid */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Motion */
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 280ms;
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* === Light theme overrides ================================================ */
html[data-theme="light"] {
    --bg-primary:   #F4F4F5;
    --bg-secondary: #FFFFFF;
    --bg-card:      #FFFFFF;
    --bg-elevated:  #FFFFFF;
    --bg-tertiary:  #FFFFFF;
    --bg-dark:      var(--bg-primary);

    --text-primary:   #18181B;
    --text-secondary: #52525B;
    --text-muted:     #71717A;

    --border-color:  #E4E4E7;
    --border:        var(--border-color);
    --border-strong: #D4D4D8;

    /* Brand purple shifts a step darker on light backgrounds for contrast */
    --fnf-purple:       var(--purple-700);
    --fnf-purple-hover: var(--purple-800);
    --fnf-purple-dark:  var(--purple-900);
    --fnf-purple-light: var(--purple-500);
    --fnf-purple-glow:  rgba(109, 40, 217, 0.18);

    --success: #059669;
    --warning: #B45309;
    --danger:  #DC2626;
    --error:   var(--danger);

    color-scheme: light;
}

/* === Global typography defaults =========================================== */

/* Headings get tighter line-height + negative tracking by default. Larger
 * sizes need more negative tracking to avoid looking loose. Pages can
 * override on individual elements when needed. */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
h3 { letter-spacing: -0.01em; }

/* === Utilities ============================================================ */

/* Tabular figures — line up columns of numbers (monetary values, order #s,
 * style codes, tracking numbers). Apply via class or scope to selectors. */
.tabular-nums,
.font-mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.font-mono {
    font-family: var(--font-mono);
}

/* Numeric-heavy elements get tabular figures baked in so columns of
 * monetary values, stats, order numbers, and tracking IDs all line up
 * without each callsite needing to remember the class. Selectors below
 * are defensive — they exist across multiple pages with the same intent. */
.stat-value,
.portfolio-value,
.pricing-value,
.tracking-number,
.style-code,
.order-id,
.order-number,
.price,
.market-value,
.financial-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* === Button system =======================================================
 * The `.btn` base + `.btn-primary` / `.btn-secondary` already exist in
 * app.html with a generous 48px size targeted at primary CTAs (Sign In,
 * Save Changes, etc). We extend the system here with:
 *   - additional variants: .btn-danger, .btn-ghost
 *   - size modifiers: .btn-sm (32px), .btn-md (40px)
 *   - states: :focus-visible (accessibility), .btn[aria-busy] (loading)
 * Existing `.btn .btn-primary` etc. remain unchanged. New callsites can
 * mix base + size + variant: e.g. `<button class="btn btn-sm btn-danger">`.
 * receive.html `button.primary` / `button.ghost` still use their inline
 * styles; we cover those via additional rules below so the new tokens
 * apply uniformly. */

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: 0;
}
.btn-danger:hover {
    background: #DC2626; /* danger-700 */
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 0;
}
.btn-ghost:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.btn-ghost-danger {
    background: transparent;
    color: var(--danger);
    border: 0;
}
.btn-ghost-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* Size modifiers — apply only when explicitly combined with .btn-sm/-md.
 * Default .btn keeps its current ~48px sizing per app.html. */
.btn.btn-sm {
    padding: 6px 12px;
    font-size: var(--text-sm);
    min-height: 32px;
    border-radius: var(--radius-sm);
}
.btn.btn-md {
    padding: 8px 16px;
    font-size: var(--text-base);
    min-height: 40px;
}

/* Universal focus ring for keyboard users. WCAG AA contrast against the
 * dark background. Pages can override via more-specific selectors. */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--purple-400);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Loading state — pages can set aria-busy="true" to render a spinner
 * inline. Lightweight: just dims content + shows a CSS-only spinner. */
.btn[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
    pointer-events: none;
}

/* === Page-header back link ================================================
 * Phase 6.1 (2026-05-25): standardized back-link pattern shared across
 * help / changelog / privacy / terms / share / receiver-settings.
 * Inconsistencies before: changelog had no arrow, help had ←, privacy/terms
 * had ← Back to Home, all 4 redefined the rule with slightly different
 * colors. Canonical here = subtle secondary text, arrow-prefixed, single
 * hover state. Pages can still override by setting a more-specific
 * selector. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.back-link:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}
.back-link::before {
    content: "←";
    font-size: 15px;
    line-height: 1;
}

/* === Scrollbar styling ====================================================
 * Phase 5 follow-up (2026-05-25): the default OS scrollbar (especially on
 * Windows) is wide, light-grey, and visually clashes with the dark UI.
 * Style scrollbars to match the app aesthetic — thin, dark thumb on near-
 * invisible track, purple-tinted on hover. Applies to every scrollable
 * surface unless a parent explicitly opts out via scrollbar-width: none
 * (e.g. the cosmetic-hidden modal scrollers in app.html).
 *
 * Two implementations:
 *   - WebKit / Blink (Chrome, Edge, Safari, Brave) — uses ::-webkit-scrollbar
 *   - Firefox — uses the standard scrollbar-color + scrollbar-width properties
 * Both fall back to OS default if unsupported. */

/* WebKit / Blink — applies to all scrollable elements */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--purple-700);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox — global default for every scrollable element. Individual
 * components can still override with scrollbar-width: none to hide. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
*:hover {
    scrollbar-color: var(--purple-700) transparent;
}

/* Honor user motion preferences globally. Pages that opt into transitions
 * (via --duration-* tokens) get them disabled here. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}