/*
 * syndic-tokens.css — SYNDIC-56 design-system tokens, lifted from
 * docs/design/handoff/v1/project/styles.css (the verbatim Claude Design
 * export). Two changes vs. the source:
 *
 *   1. The source's `@import url('https://fonts.googleapis.com/...')` is
 *      replaced with self-hosted @font-face declarations pointing at
 *      /fonts/{family}/*.woff2 (committed under SYNDIC-56 stage 2). No
 *      third-party requests at runtime.
 *
 *   2. Component selectors (.app, .sidebar, .nav-item, etc.) DO NOT
 *      land in this file. Components are feature-ticket territory;
 *      this file is tokens + font registration only.
 *
 * Load order in wwwroot/index.html (set in stage 6):
 *
 *     <link href="_content/MudBlazor/MudBlazor.min.css" />
 *     <link href="css/syndic-tokens.css" />
 *     <link href="css/app.css" />
 *
 * The token names mirror the source 1:1 — adding "syndic-" prefixes
 * everywhere would diverge the lift from the handoff and make future
 * design re-exports harder to diff against this file. The handoff
 * already prefixes brand tokens (--syndic-blue) but uses unprefixed
 * names for surface/ink/line tokens; we keep that convention.
 */

/* ---------- Self-hosted fonts (SYNDIC-56 stage 2) ----------------- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter/Inter-Bold.woff2') format('woff2');
}

/* Cairo is a variable font: one WOFF2 per unicode-range subset, weights
   covered inside. Three @font-face declarations × two subsets = AR text
   at any weight 400-700 renders from one of the two files. */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/cairo/Cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
        U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
        U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/cairo/Cairo-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;
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/instrument-serif/InstrumentSerif-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
}

/* ---------- Light theme tokens (default) -------------------------- */

:root {
    /* Brand — sRGB hex, theme-invariant */
    --syndic-blue: #1A56AA;
    --syndic-blue-deep: #0E3F84;
    --syndic-blue-ink: #0A1F40;
    --syndic-teal: #0D9E8A;
    --syndic-teal-deep: #07685B;

    /* Status — sRGB hex, theme-invariant */
    --ok: #0D9E8A;
    --warn: #C77A12;
    --crit: #B83A3A;
    --info: #1A56AA;

    /* Light theme surfaces — OKLCH */
    --bg: oklch(98% 0.004 75);
    --bg-2: oklch(96% 0.006 75);
    --bg-3: oklch(94% 0.008 75);
    --surface: #FFFFFF;
    --ink: oklch(18% 0.02 250);
    --ink-2: oklch(34% 0.02 250);
    --ink-3: oklch(52% 0.02 250);
    --ink-4: oklch(70% 0.015 250);
    --line: oklch(90% 0.008 75);
    --line-2: oklch(85% 0.01 75);
    --tint-blue: oklch(95% 0.02 250);
    --tint-teal: oklch(95% 0.04 180);
    --tint-warn: oklch(95% 0.04 70);
    --tint-crit: oklch(95% 0.04 25);

    /* Geometry */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;

    /* Type */
    --f-sans: 'Inter', system-ui, sans-serif;
    --f-serif: 'Instrument Serif', 'Times New Roman', serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;
    --f-ar: 'Cairo', 'Inter', sans-serif;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(10, 31, 64, 0.04), 0 0 0 1px rgba(10, 31, 64, 0.04);
    --shadow-md: 0 4px 12px rgba(10, 31, 64, 0.06), 0 0 0 1px rgba(10, 31, 64, 0.04);
    --shadow-lg: 0 24px 48px -16px rgba(10, 31, 64, 0.18), 0 0 0 1px rgba(10, 31, 64, 0.04);
}

/* ---------- Dark theme overrides ---------------------------------- */

[data-theme="dark"] {
    --bg: oklch(15% 0.015 250);
    --bg-2: oklch(18% 0.018 250);
    --bg-3: oklch(22% 0.02 250);
    --surface: oklch(20% 0.02 250);
    --ink: oklch(96% 0.005 75);
    --ink-2: oklch(82% 0.01 75);
    --ink-3: oklch(64% 0.012 75);
    --ink-4: oklch(48% 0.012 75);
    --line: oklch(28% 0.02 250);
    --line-2: oklch(34% 0.02 250);
    --tint-blue: oklch(28% 0.05 250);
    --tint-teal: oklch(28% 0.06 180);
    --tint-warn: oklch(28% 0.05 70);
    --tint-crit: oklch(28% 0.05 25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
}