/* osperan-critical.css — loads before osperan.css
 *
 * Contains: CSS custom properties (design tokens), light theme tokens,
 * and self-hosted @font-face declarations.
 *
 * Kept small so the browser resolves all tokens and begins font
 * downloads before parsing the main stylesheet.
 */

/* ---- Self-hosted fonts (replaces external font requests) ----
   Osperan identity: Instrument Serif display, Manrope work copy.
     - Manrope        — body typeface (400-700)
     - Instrument Serif — display typeface for headings and brand moments
     - Space Grotesk  — monospace / tabular accent (400-500)
   Files include the source license beside the bundled font assets. */

/* Instrument Serif — display */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/instrument-serif-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/instrument-serif-latin.woff2') 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;
}

/* Manrope — body */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/manrope-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/manrope-normal-latin.woff2') 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;
}

/* Space Grotesk — mono / tabular accent (.font-mono, .mono helpers) */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-normal-latin.woff2') 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;
}

/* ---- Design tokens ---- */

:root {
    color-scheme: light;
    /* Light surfaces: warm cream and near-white cards. */
    --bg-page: #F7F4EF;
    --bg-card: #FFFEFC;
    /* Primary navigation — navy with high contrast labels. */
    --bg-sidebar: #0D2742;
    --bg-sidebar-hover: rgba(76,102,130,0.16);
    --bg-sidebar-active: rgba(76,102,130,0.30);
    --sidebar-text: #FFFEFC;
    --sidebar-text-muted: rgba(247,244,239,0.72);
    --sidebar-icon: #F7F4EF;
    --sidebar-border: rgba(247,244,239,0.22);
    --bg-topbar: rgba(255,254,252,0.92);
    /* Brand identity — navy. --brand-blue remains a semantic alias. */
    --brand-blue: #0D2742;
    --brand-blue-bright: #4C6682;
    --brand-slate: #4C6682;
    --brand-terracotta: #B96549;
    --brand-peach: #F2B49F;
    --brand-cream: #F7F4EF;
    --terracotta-rgb: 185,101,73;
    --navy-rgb: 13,39,66;
    --card-rgb: 255,254,252;
    --overlay-scrim: rgba(13,39,66,0.38);
    /* Muted status colors; use high-contrast labels beside status cues. */
    --brand-amber: #8A7046;
    --brand-amber-bright: #8A7046;
    --brand-amber-text: #0D2742;
    --brand-green: #557565;
    --brand-red: #98645E;
    /* Cool slate borders. */
    --border-subtle: rgba(76,102,130,0.18);
    /* Text — navy primary with slate support copy. */
    --text-primary: #0D2742;
    --text-secondary: #4C6682;
    --text-muted: #4C6682;
    --text-on-dark: #FFFEFC;
    --text-on-dark-muted: rgba(247,244,239,0.72);
    --border: #E6DED5;
    --border-cool: #E6DED5;
    --border-strong: rgba(76,102,130,0.38);
    /* Alpha tints derive from shared slate and status colors. */
    --tint-blue: rgba(76,102,130,0.10);   /* cool brand tint */
    --tint-amber: rgba(138,112,70,0.10);
    --tint-green: rgba(85,117,101,0.10);
    --tint-red: rgba(152,100,94,0.10);
    --tint-slate: rgba(76,102,130,0.08);
    /* Quiet navy shadows. */
    --shadow-sm: 0 1px 2px rgba(13,39,66,0.04);
    --shadow-md: 0 2px 6px rgba(13,39,66,0.05), 0 1px 2px rgba(13,39,66,0.04);
    --shadow-lg: 0 12px 32px -12px rgba(13,39,66,0.12), 0 2px 6px rgba(13,39,66,0.04);
    --shadow-xl: 0 20px 60px rgba(13,39,66,0.16);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-card: 12px;
    /* Dual-ring focus (Osperan identity) — inner ring matches card bg, outer ring
       uses the terracotta focus cue, visible against either light surface. */
    --focus-ring: 0 0 0 2px var(--bg-card), 0 0 0 4px rgba(185,101,73,0.82);
    /* Instrument Serif display, Manrope work typography, Space Grotesk mono. */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'Space Grotesk', ui-monospace, 'Cascadia Mono', monospace;
    /* Typography scale */
    --text-xs:   0.72rem;
    --text-sm:   0.82rem;
    --text-base: 0.95rem;
    --text-md:   1.05rem;
    --text-lg:   1.25rem;
    --text-xl:   clamp(1.25rem, 1.5vw, 1.75rem);
    --text-2xl:  clamp(1.75rem, 2vw,   2.5rem);
    --text-hero: clamp(2.5rem,  3.5vw, 4rem);
    /* Extended radius tokens */
    --radius-xs:   4px;
    --radius-pill: 999px;
    /* Spacing tokens */
    --card-padding-sm: 12px 16px;
    --card-padding-md: 16px 20px;
    --card-padding-lg: 20px 24px;
    /* AI surfaces use slate; primary actions use navy. */
    --brand-ai:      #4C6682;
    --brand-ai-tint: rgba(76,102,130,0.12);
    --brand-ai-glow: rgba(76,102,130,0.45);
    /* Motion tokens — mirror of tokens.css; kept here so
       first-paint transitions resolve without waiting for the main stylesheet. */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 280ms;
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    /* Interactive state transitions (ease-out quart — natural deceleration).
       Curve aligned with --ease-out-quart above; kept as a separate token so
       existing callers (`--forge-ease-out-quart`) don't break. */
    --forge-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}