/* 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-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;
    --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;
    --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-compact: 0.78rem;
    --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);
    /* Semantic typography roles */
    --type-page-title-size: 24px;
    --type-page-title-family: 'Instrument Serif', Georgia, serif;
    --type-page-title-weight: 400;
    --type-page-title-line-height: 1.1;
    --type-page-title-letter-spacing: -0.02em;
    --type-kpi-value-size: 32px;
    --type-kpi-value-family: 'Instrument Serif', Georgia, serif;
    --type-kpi-value-weight: 400;
    --type-kpi-value-line-height: 1.1;
    --type-kpi-value-letter-spacing: -0.02em;
    --type-brand-wordmark-size: 32px;
    --type-brand-wordmark-family: 'Instrument Serif', Georgia, serif;
    --type-brand-wordmark-weight: 400;
    --type-brand-wordmark-line-height: 1.1;
    --type-brand-wordmark-letter-spacing: -0.02em;
    --type-display-hero-size: clamp(2.4rem, 5.25vw, 5.6rem);
    --type-display-hero-family: 'Instrument Serif', Georgia, serif;
    --type-display-hero-weight: 400;
    --type-display-hero-line-height: 0.96;
    --type-display-hero-letter-spacing: -0.025em;
    --type-section-title-size: 18px;
    --type-section-title-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-section-title-weight: 600;
    --type-section-title-line-height: 1.25;
    --type-section-title-letter-spacing: normal;
    --type-panel-title-size: 16px;
    --type-panel-title-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-panel-title-weight: 600;
    --type-panel-title-line-height: 1.25;
    --type-panel-title-letter-spacing: normal;
    --type-body-size: 14px;
    --type-body-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-body-weight: 400;
    --type-body-line-height: 1.5;
    --type-body-letter-spacing: normal;
    --type-body-emphasis-size: 14px;
    --type-body-emphasis-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-body-emphasis-weight: 600;
    --type-body-emphasis-line-height: 1.5;
    --type-body-emphasis-letter-spacing: normal;
    --type-body-secondary-size: 13px;
    --type-body-secondary-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-body-secondary-weight: 400;
    --type-body-secondary-line-height: 1.4;
    --type-body-secondary-letter-spacing: normal;
    --type-table-cell-size: 13px;
    --type-table-cell-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-table-cell-weight: 400;
    --type-table-cell-line-height: 1.4;
    --type-table-cell-letter-spacing: normal;
    --type-table-header-size: 13px;
    --type-table-header-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-table-header-weight: 600;
    --type-table-header-line-height: 1.4;
    --type-table-header-letter-spacing: normal;
    --type-field-label-size: 12px;
    --type-field-label-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-field-label-weight: 600;
    --type-field-label-line-height: 1.25;
    --type-field-label-letter-spacing: normal;
    --type-caption-size: 12px;
    --type-caption-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-caption-weight: 400;
    --type-caption-line-height: 1.4;
    --type-caption-letter-spacing: normal;
    --type-navigation-size: 13px;
    --type-navigation-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-navigation-weight: 500;
    --type-navigation-line-height: 1.25;
    --type-navigation-letter-spacing: normal;
    --type-eyebrow-size: 12px;
    --type-eyebrow-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --type-eyebrow-weight: 600;
    --type-eyebrow-line-height: 1.25;
    --type-eyebrow-letter-spacing: 0.04em;
    --type-technical-size: 12px;
    --type-technical-family: 'Space Grotesk', ui-monospace, 'Cascadia Mono', monospace;
    --type-technical-weight: 500;
    --type-technical-line-height: 1.4;
    --type-technical-letter-spacing: normal;
    /* Shared text line-height variants */
    --type-compact-line-height: 1.35;
    --type-supporting-line-height: 1.45;
    --type-label-transform: uppercase;
    --type-label-letter-spacing: 0.08em;
    /* Extended radius tokens */
    --radius-xs:   4px;
    --radius-pill: 999px;
    --radius-none: 0;
    /* Spacing tokens */
    --space-0: 0;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 40px;
    --layout-card-min-width: 220px;
    --layout-document-queue-score-min-inline-size: 80px;
    --layout-drawer-width: 480px;
    --layout-drawer-max-inline-size: 100%;
    --layout-dialog-min-inline-size: min(320px, calc(100vw - var(--space-8)));
    --layout-dialog-compact-max-inline-size: 460px;
    --layout-dialog-standard-max-inline-size: 480px;
    --border-width-default: 1px;
    --border-width-none: 0;
    --border-style-default: solid;
    --layout-dialog-product-create-min-inline-size: min(520px, calc(100vw - var(--space-8)));
    --layout-dialog-product-create-max-inline-size: 680px;
    --layout-dialog-product-delete-min-inline-size: min(400px, calc(100vw - var(--space-8)));
    --layout-dialog-product-delete-max-inline-size: 560px;
    --layout-dialog-settings-archive-min-inline-size: min(360px, calc(100vw - var(--space-8)));
    --layout-dialog-settings-archive-max-inline-size: 480px;
    --layout-dialog-settings-applicability-min-inline-size: min(380px, calc(100vw - var(--space-8)));
    --layout-dialog-settings-applicability-max-inline-size: 520px;
    --layout-dialog-settings-restore-min-inline-size: min(320px, calc(100vw - var(--space-8)));
    --layout-dialog-settings-restore-max-inline-size: 480px;
    --layout-dialog-scope-reason-max-inline-size: 560px;
    --layout-dialog-scope-standard-max-inline-size: 620px;
    --layout-document-preview-height: 320px;
    --layout-draft-preview-drawer-width: 520px;
    --layout-draft-preview-drawer-fluid-inline-size: auto;
    --layout-responsive-card-grid-columns: repeat(auto-fit, minmax(min(100%, var(--layout-card-min-width)), 1fr));
    --layout-source-intake-mobile-uploader-block-size: 132px;
    --layout-upload-dialog-min-block-size: 54px;
    --layout-feedback-upload-max-block-size: 78px;
    --layout-declaration-review-dialog-inline-size: min(960px, 95vw);
    --layout-declaration-review-dialog-max-block-size: 90vh;
    --layout-declaration-review-scroll-block-size: 55vh;
    --layout-mobile-full-inline-size: 100vw;
    --layout-monitoring-source-family-icon-column-size: 24px;
    --layout-monitoring-source-family-grid-columns: var(--layout-monitoring-source-family-icon-column-size) minmax(0, 1fr) auto;
    --layout-monitoring-source-family-row-min-block-size: 38px;
    --layout-min-content-size: 0;
    --layout-full-inline-size: 100%;
    --layout-unbounded-size: none;
    --layout-sidebar-expanded-width: 240px;
    --layout-mobile-topbar-action-inline-size: 40px;
    --layout-mobile-breadcrumb-max-inline-size: min(40vw, 300px);
    --layout-scope-workspace-gap: 14px;
    --layout-scope-regulation-list-padding: 2px 0 5px;
    --layout-product-workspace-columns-tablet: minmax(0, 1fr);
    --layout-stage-action-columns-tablet: repeat(2, minmax(0, 1fr));
    --layout-manager-decision-columns-mobile: minmax(0, 1fr) auto;
    --layout-scope-workspace-columns-mobile: minmax(0, 1fr);
    --layout-settings-field-columns-mobile: minmax(0, 1fr);
    --layout-settings-field-columns-desktop: repeat(2, minmax(0, 1fr));
    --layout-product-process-columns-desktop: repeat(4, minmax(0, 1fr));
    --layout-product-process-columns-mobile: repeat(2, minmax(0, 1fr));
    --layout-page-gutter-top-responsive: clamp(12px, 4vw, 24px);
    --layout-page-gutter-x-responsive: clamp(12px, 5vw, 32px);
    /* 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
}