/* ============================================
   BASE.CSS
   Design tokens, reset, typography
   Load order: 1 of 4
   ============================================ */

/* ============================================
   SELF-HOSTED FONTS
   Eliminates third-party tracking and reduces FOUT
   ============================================ */

/* Satoshi - Primary font */
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* IBM Plex Mono - Code font */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* OpenDyslexic - Accessibility font */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('/fonts/opendyslexic/OpenDyslexic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('/fonts/opendyslexic/OpenDyslexic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic Mono';
    src: url('/fonts/opendyslexic/OpenDyslexicMono-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   DESIGN SYSTEM - Blueprint as Trust
   Light theme with burnt orange accent
   ============================================ */

:root {
    /* === DESIGN TOKENS === */

    /* Backgrounds - Warmer */
    --bg: #f7f6f3;
    --bg-card: #ffffff;
    --bg-subtle: #faf9f6;
    --bg-warm: #faf9f6;

    /* Text - Warm blacks */
    --text: #1c1b18;
    --text-secondary: #52514b;
    --text-muted: #8a8983;

    /* Borders - Bolder for neubrutalism */
    --border: #1c1b18;
    --border-light: rgba(28, 27, 24, 0.1);
    --border-medium: rgba(28, 27, 24, 0.2);
    --border-strong: rgba(28, 27, 24, 0.25);

    /* Accent - Burnt orange (unchanged values, new additions) */
    --accent: #d45a07;
    --accent-hover: #b94d06;
    --accent-muted: rgba(212, 90, 7, 0.1);
    --accent-subtle: rgba(212, 90, 7, 0.06);
    --accent-light: #fef7f0;

    /* Section Colors - NEW */
    --blue: #2563eb;
    --blue-light: #f0f6ff;
    --purple: #7c3aed;
    --purple-light: #f5f3ff;

    /* Semantic Colors */
    --green: #1a7a42;
    --green-muted: rgba(26, 122, 66, 0.08);
    --green-border: rgba(26, 122, 66, 0.2);
    --green-light: #f0fdf5;
    --red: #c43c2c;
    --red-muted: rgba(196, 60, 44, 0.08);
    --red-border: rgba(196, 60, 44, 0.2);

    /* Grid Background - Refined */
    --grid-fine: rgba(28, 27, 24, 0.03);
    --grid-major: rgba(28, 27, 24, 0.05);

    /* Shadows - Solid, neubrutalist */
    --shadow-sm: 3px 3px 0 rgba(28, 27, 24, 0.06);
    --shadow-md: 4px 4px 0 rgba(28, 27, 24, 0.08);
    --shadow-lg: 6px 6px 0 rgba(28, 27, 24, 0.1);

    /* Typography Scale */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-5xl: 48px;

    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Fonts - NEW: Satoshi replaces DM Sans */
    --font-sans: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent);
    color: white;
    padding: 8px 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 1001;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ============================================
   DYSLEXIC-FRIENDLY FONT OPTION
   ============================================ */

/* Improve contrast - OpenDyslexic needs darker text to be readable */
body.dyslexic-font {
    --text-muted: #3d3c38;      /* Significantly darker */
    --text-secondary: #1c1b18;  /* Nearly matches --text */
}

body.dyslexic-font,
body.dyslexic-font * {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Preserve monospace for code/terminal elements */
body.dyslexic-font code,
body.dyslexic-font pre,
body.dyslexic-font .terminal-body,
body.dyslexic-font .line-num,
body.dyslexic-font .line-text,
body.dyslexic-font [class*="mono"],
body.dyslexic-font .font-mono {
    font-family: 'OpenDyslexic Mono', 'OpenDyslexic', monospace !important;
}