/* =========================================================================
   ComicScout — Colors & Type Foundation
   Source of truth: ios/ComicScout/DesignSystem/Tokens.swift +
                    .planning/sketches/themes/default.css (v3 locked 2026-05-01)
   Aesthetic: Sotheby's catalog × CGC slab × Apple Wallet.
   ========================================================================= */

/* ---------- Webfonts ----------------------------------------------------- */
@font-face {
    font-family: "Instrument Serif";
    src: url("/assets/fonts/InstrumentSerif-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("/assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ===== Backgrounds — two by intent =================================== */
    --cs-bg-deep: #000000;          /* Verdict + Paywall (drama) */
    --cs-bg: #0E0D0B;               /* Home, History, Sold Comps, Watchlist */
    --cs-surface: #1C1B18;          /* Cards, list rows */
    --cs-surface-elev: #242320;     /* Verdict box (warm brown) */
    --cs-surface-tab: #1A1815;      /* Bottom tab bar */
    --cs-surface-tab-active: #2A2825;

    /* ===== Borders / dividers =========================================== */
    --cs-border: rgba(245, 239, 224, 0.08);
    --cs-border-strong: rgba(245, 239, 224, 0.13);
    --cs-border-brass: rgba(184, 150, 81, 0.35);
    --cs-divider: rgba(138, 130, 117, 0.15);

    /* ===== Text — warm ivory scale, never pure white ==================== */
    --cs-text: #F2E8D5;             /* primary */
    --cs-text-secondary: #F4ECD8;
    --cs-text-muted: #8A8275;
    --cs-text-dim: #6B6962;
    --cs-text-faint: #5C564E;

    /* ===== Brass — single accent ======================================== */
    --cs-brass: #A8924A;            /* wordmark, icons, links */
    --cs-brass-deep: #6B5A2A;       /* primary CTA fill */
    --cs-brass-light: #B8964A;      /* nav chevrons, active highlights */
    --cs-brass-text: #C5A158;       /* readable on dark surfaces */

    /* ===== Verdict pill (background) — DEEP DESATURATED ================= */
    --cs-buy: #2A5C3F;              /* deep forest green */
    --cs-watch: #7A5C1E;            /* deep dark gold */
    --cs-pass: #5C2A2A;             /* deep wine red */
    --cs-ask: #2A3F5C;              /* deep navy blue */

    /* ===== Verdict word (Garamond display tone) ========================= */
    --cs-buy-word: #3A7A52;
    --cs-watch-word: #C5A555;
    --cs-pass-word: #B85549;
    --cs-ask-word: #6C8FEA;

    /* ===== Verdict-tinted soft surfaces ================================= */
    --cs-buy-soft: rgba(42, 92, 63, 0.16);
    --cs-watch-soft: rgba(122, 92, 30, 0.16);
    --cs-pass-soft: rgba(92, 42, 42, 0.16);
    --cs-ask-soft: rgba(42, 63, 92, 0.16);

    /* ===== Risk amber =================================================== */
    --cs-risk: #D4A85A;
    --cs-risk-soft: rgba(212, 168, 90, 0.12);

    /* ===== Grading-company accents ====================================== */
    --cs-cbcs: #B8740A;             /* CBCS amber */

    /* ===== Semantic UI states =========================================== */
    --cs-error: #B85549;            /* matches pass-word */

    /* ===== Type families ================================================ */
    --cs-font-display: "Instrument Serif", "Cormorant Garamond", "EB Garamond", Georgia, serif;
    --cs-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                  "Inter", "Helvetica Neue", Arial, sans-serif;
    --cs-font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "IBM Plex Mono",
                    Menlo, Consolas, monospace;

    /* ===== Type scale (px) =============================================
       Display = Instrument Serif (verdict word, page titles, hero)
       Body = SF Pro / system
       Mono = SF Mono with tabular-nums (prices, scores, dates)
    --------------------------------------------------------------------- */
    --cs-display-96: 96px;          /* onboarding hero count-up */
    --cs-display-54: 54px;          /* verdict word inside box */
    --cs-display-40: 40px;          /* page titles ("History", "Sold Comps") */
    --cs-display-34: 34px;          /* hero ("Know before / you buy.") */
    --cs-display-26: 26px;          /* nav title ("Scout") */
    --cs-display-22: 22px;
    --cs-display-17: 17px;          /* identity strip title */

    --cs-body: 14px;
    --cs-meta: 13px;
    --cs-small: 12px;
    --cs-label: 11px;               /* small caps section heads */
    --cs-tiny: 10px;                /* verdict pill */

    --cs-mono-price: 20px;
    --cs-mono-row: 14px;
    --cs-mono-small: 12px;
    --cs-score: 54px;               /* SF Mono "87" inside verdict box */

    /* ===== Letter-spacing =============================================== */
    --cs-track-caps: 0.2em;         /* small-caps section heads ("KEY SIGNALS") */
    --cs-track-pill: 0.1em;         /* verdict pill text */
    --cs-track-tight: -0.01em;      /* display headlines */

    /* ===== Spacing scale (4pt base) ===================================== */
    --cs-space-xs: 4px;
    --cs-space-sm: 8px;
    --cs-space-md: 16px;
    --cs-space-lg: 24px;
    --cs-space-xl: 40px;
    --cs-space-xxl: 64px;

    /* ===== Radius scale ================================================= */
    --cs-radius-sm: 3px;
    --cs-radius-md: 8px;
    --cs-radius-lg: 12px;
    --cs-radius-xl: 16px;
    --cs-radius-xxl: 22px;
    --cs-radius-pill: 9999px;

    /* ===== Motion ======================================================= */
    --cs-ease-out-cubic: cubic-bezier(0.22, 1, 0.36, 1);
    --cs-dur-screen: 0.20s;
    --cs-dur-tab: 0.15s;
    --cs-dur-score: 1.20s;
}

/* =========================================================================
   Semantic element styles — apply baseline brand voice without classes
   ========================================================================= */
html, body {
    background: var(--cs-bg);
    color: var(--cs-text);
    font-family: var(--cs-font-ui);
    font-size: var(--cs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--cs-font-display);
    font-weight: 400;
    color: var(--cs-text);
    letter-spacing: var(--cs-track-tight);
    line-height: 1.05;
    margin: 0;
}

h1 { font-size: var(--cs-display-40); }
h2 { font-size: var(--cs-display-34); }
h3 { font-size: var(--cs-display-26); }
h4 { font-size: var(--cs-display-22); }

p { margin: 0 0 var(--cs-space-md); color: var(--cs-text); }

a { color: var(--cs-brass-text); text-decoration: none; }
a:hover { color: var(--cs-text); text-decoration: underline; text-underline-offset: 3px; }

code, kbd, samp, pre {
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
}

hr {
    border: 0;
    height: 1px;
    background: var(--cs-border);
    margin: var(--cs-space-lg) 0;
}

/* =========================================================================
   Utility classes for the design system
   ========================================================================= */

/* Small-caps section head ("KEY SIGNALS", "RECENT SCANS") */
.cs-eyebrow {
    font-family: var(--cs-font-ui);
    font-size: var(--cs-label);
    font-weight: 600;
    letter-spacing: var(--cs-track-caps);
    color: var(--cs-text-muted);
    text-transform: uppercase;
}

/* Verdict pill — used in History, Recent Scans, etc */
.cs-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--cs-radius-pill);
    font-family: var(--cs-font-ui);
    font-size: var(--cs-tiny);
    font-weight: 700;
    letter-spacing: var(--cs-track-pill);
    color: var(--cs-text-secondary);
    text-transform: uppercase;
}
.cs-pill.buy   { background: var(--cs-buy); }
.cs-pill.watch { background: var(--cs-watch); }
.cs-pill.pass  { background: var(--cs-pass); }
.cs-pill.ask   { background: var(--cs-ask); }

/* Brass hairline divider (matches BrassHairline.swift) */
.cs-hairline {
    height: 1px;
    background: var(--cs-border-brass);
    margin: var(--cs-space-md) 0;
}
.cs-hairline-gradient {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(176, 141, 87, 0.4) 20%,
        rgba(176, 141, 87, 0.4) 80%,
        transparent
    );
}

/* Mono text for prices, scores, dates */
.cs-mono { font-family: var(--cs-font-mono); font-variant-numeric: tabular-nums; }

/* Bracket mark used as the Scout logo glyph — wraps any character/element.
   Renders 4 brass corner brackets around the content.
   Reference: Scout / Comic Intelligence wordmark — short legs, slightly rounded.
*/
.cs-bracket {
    position: relative;
    display: inline-block;
    padding: 0.18em 0.28em;
    font-style: normal;
}
.cs-bracket::before,
.cs-bracket::after,
.cs-bracket > .cs-bracket-bl,
.cs-bracket > .cs-bracket-br {
    content: "";
    position: absolute;
    width: 0.22em;
    height: 0.22em;
    border-color: var(--cs-brass);
    border-style: solid;
    border-radius: 2px;
}
.cs-bracket::before        { top: 0; left: 0;    border-width: 1.5px 0 0 1.5px; }
.cs-bracket::after         { top: 0; right: 0;   border-width: 1.5px 1.5px 0 0; }
.cs-bracket .cs-bracket-bl { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; }
.cs-bracket .cs-bracket-br { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }

/* Primary CTA — deep brass pill */
.cs-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cs-space-sm);
    padding: 16px 32px;
    min-height: 56px;
    background: var(--cs-brass-deep);
    color: var(--cs-text-secondary);
    border: 1px solid var(--cs-brass);
    border-radius: var(--cs-radius-pill);
    font-family: var(--cs-font-ui);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    text-decoration: none;
}
.cs-btn-primary:hover {
    background: #7d6932;
    color: var(--cs-text-secondary);
    text-decoration: none;
}
.cs-btn-primary:active { transform: translateY(1px); }

/* Ghost button — bracket-style outline */
.cs-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cs-space-sm);
    padding: 14px 28px;
    background: transparent;
    color: var(--cs-text-muted);
    border: 1px solid var(--cs-border-strong);
    border-radius: var(--cs-radius-pill);
    font-family: var(--cs-font-ui);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.cs-btn-ghost:hover {
    border-color: var(--cs-brass);
    color: var(--cs-text);
    text-decoration: none;
}

/* Card surface */
.cs-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}