/* ============================================================
   Solvyr v2 — Design tokens
   ============================================================ */

@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/Fraunces.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/Fraunces-italic.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Surfaces (warm dark editorial) ---- */
    --ink-900:   #0B0D12;   /* primary page bg */
    --ink-800:   #13161D;   /* card bg, alt section */
    --ink-700:   #1B1F28;   /* borders, hairlines */
    --ink-600:   #242935;   /* raised surfaces */
    --ink-500:   #343B4A;   /* form borders hover */

    /* ---- Ink ---- */
    --paper:     #F7F6F2;   /* body text on dark */
    --paper-dim: #C8C6BE;   /* secondary */
    --mute-500:  #8A8F9A;   /* tertiary, metadata */
    --mute-700:  #5B616C;   /* disabled, subtle */

    /* ---- Accent ---- */
    --amber-500: #FFB020;   /* primary brand */
    --amber-400: #FFC14D;
    --amber-300: #FFCE5F;   /* hover bright */
    --amber-100: #FFE9B5;
    --amber-tint: rgba(255, 176, 32, 0.08);
    --amber-tint-strong: rgba(255, 176, 32, 0.16);

    /* ---- Status (use sparingly) ---- */
    --sage-400:  #6BC7A8;   /* metric positive */
    --coral-500: #F05A2F;   /* error */

    /* ---- Fonts ---- */
    --font-display: 'Fraunces', ui-serif, Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ---- Type scale (fluid clamp) ---- */
    --step--1: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);      /* micro */
    --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);   /* body */
    --step-1:  clamp(1.1rem, 1rem + 0.5vw, 1.3rem);          /* lead */
    --step-2:  clamp(1.4rem, 1.25rem + 0.75vw, 1.875rem);    /* h4 */
    --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);      /* h3 */
    --step-4:  clamp(2.25rem, 1.9rem + 1.75vw, 3.5rem);      /* h2 */
    --step-5:  clamp(2.75rem, 2.2rem + 2.75vw, 5.5rem);      /* h1 */

    /* ---- Spacing (8px base) ---- */
    --space-1: 0.5rem;    /*  8 */
    --space-2: 1rem;      /* 16 */
    --space-3: 1.5rem;    /* 24 */
    --space-4: 2rem;      /* 32 */
    --space-5: 3rem;      /* 48 */
    --space-6: 4rem;      /* 64 */
    --space-7: 6rem;      /* 96 */
    --space-8: 8rem;      /*128 */

    /* ---- Radii ---- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
    --shadow-ring: 0 0 0 3px rgba(255, 176, 32, 0.25);

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.33, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 400ms;
    --dur-4: 600ms;

    /* ---- Layout ---- */
    --container: 1200px;
    --container-narrow: 860px;
    --container-wide: 1400px;
    --nav-h: 72px;

    /* ---- Breakpoints (reference only, not usable in @media via var()) ---- */
    /* sm:  480  md: 720  lg: 960  xl: 1200 */
}