/* ==========================================================================
   tokens.css — withkeshav.com design tokens (SINGLE SOURCE OF TRUTH)
   --------------------------------------------------------------------------
   Theming model:
   - Light is the DEFAULT on every visit (:root).
   - Dark is opt-in for the session only via html[data-theme="dark"] (set by JS).
   - NO cookies, NO localStorage, NO prefers-color-scheme. Next visit = light.
   - Components NEVER hardcode values. Change a variable here, the whole site
     (incl. tables & charts) updates.
   ========================================================================== */

/* ---------- Self-hosted fonts (assets/fonts/) ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-700.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-700.woff2') format('woff2');
}

/* ==========================================================================
   LIGHT THEME (default)
   ========================================================================== */
:root {
    /* ---- Color ---- */
    --color-bg: #FAFAFA;
    --color-surface: #FFFFFF;
    --color-border: #E5E7EB;
    --color-text-primary: #111827;
    --color-text-secondary: #4B5563;
    --color-accent: #3B5BDB;
    --color-accent-hover: #2F49B0;
    --color-on-accent: #FFFFFF;      /* text on solid accent (primary buttons) */
    --color-success: #047857;
    --color-warning: #B45309;

    /* Derived surface tints (token-driven, used by tables / callouts / tags) */
    --color-surface-tint: #F3F4F6;   /* table header / tag fill / zebra */
    --color-code-bg: #F5F6F8;        /* code panels */
    --color-accent-tint: rgba(59, 91, 219, 0.08);   /* callout / hover wash */
    --color-warning-tint: rgba(180, 83, 9, 0.08);
    --color-overlay: rgba(17, 24, 39, 0.45);        /* mobile menu scrim */
    --color-selection-fg: #FFFFFF;

    /* ---- Chart palette (accent + 4 muted analogues) ---- */
    --chart-1: var(--color-accent);
    --chart-2: #5E7CE2;
    --chart-3: #8098A6;
    --chart-4: #7C6FCB;
    --chart-5: #3F8FA8;
    --chart-grid: var(--color-border);

    /* ---- Syntax highlight (hljs spans; sober, on-brand) ---- */
    --code-keyword: #2F49B0;
    --code-string: #047857;
    --code-comment: #6B7280;
    --code-number: #B45309;
    --code-function: #3B5BDB;
    --code-punctuation: #4B5563;

    /* ---- Typography ---- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Fluid type scale */
    --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.25rem);
    --fs-h2: clamp(1.75rem, 3vw + 1rem, 2.25rem);
    --fs-h3: clamp(1.375rem, 2vw + 1rem, 1.625rem);
    --fs-h4: clamp(1.125rem, 1.5vw + 1rem, 1.375rem);
    --fs-body: clamp(1rem, 0.5vw + 0.95rem, 1.125rem);
    --fs-small: 0.875rem;
    --fs-code: 0.9em;

    --lh-body: 1.65;
    --lh-heading: 1.2;
    --paragraph-gap: 1.5rem;

    /* ---- Spacing (8px base) ---- */
    --space-xs: 0.25rem;   /* 4  */
    --space-sm: 0.5rem;    /* 8  */
    --space-md: 1rem;      /* 16 */
    --space-lg: 1.5rem;    /* 24 */
    --space-xl: 2rem;      /* 32 */
    --space-2xl: 3rem;     /* 48 */
    --space-3xl: 4rem;     /* 64 */
    --space-4xl: 6rem;     /* 96 */
    --space-section: 6rem;

    /* ---- Layout ---- */
    --container-max: 1200px;
    --reading-max: 720px;
    --reading-measure: 65ch;

    /* ---- Borders & radius ---- */
    --radius-base: 2px;
    --radius-md: 4px;
    --border-width: 1px;
    --border: var(--border-width) solid var(--color-border);

    /* ---- Motion ---- */
    --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;
    --dur-mid: 220ms;
    --dur-slow: 300ms;

    /* ---- Elevation (sober: near-flat, no soft shadows) ---- */
    --focus-ring: 2px solid var(--color-accent);

    color-scheme: light;
}

/* ==========================================================================
   DARK THEME (session-only, applied by JS on <html>)
   ========================================================================== */
html[data-theme="dark"] {
    --color-bg: #0B1120;
    --color-surface: #151E2E;
    --color-border: #2A3547;
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #94A3B8;
    --color-accent: #6B8AFF;
    --color-accent-hover: #8AA1FF;
    --color-on-accent: #0B1120;      /* dark text on brightened accent */
    --color-success: #34D399;
    --color-warning: #FBBF24;

    --color-surface-tint: #1B2637;
    --color-selection-fg: #0B1120;
    --color-code-bg: #101828;
    --color-accent-tint: rgba(107, 138, 255, 0.14);
    --color-warning-tint: rgba(251, 191, 36, 0.12);
    --color-overlay: rgba(0, 0, 0, 0.6);

    /* Chart palette brightened for dark backgrounds */
    --chart-1: var(--color-accent);
    --chart-2: #8AA1FF;
    --chart-3: #9FB2C4;
    --chart-4: #A99BF0;
    --chart-5: #5FBBD6;
    --chart-grid: var(--color-border);

    /* Syntax highlight (brighter for AA on dark panels) */
    --code-keyword: #8AA1FF;
    --code-string: #34D399;
    --code-comment: #94A3B8;
    --code-number: #FBBF24;
    --code-function: #6B8AFF;
    --code-punctuation: #94A3B8;

    color-scheme: dark;
}