/* Consolata brand — exact palette + design system tokens */

:root {
    /* Brand palette (never change) */
    --brand: #ca591b;
    --brand-dark: #a34715;
    --brand-darker: #7d3510;
    --brand-light: #fdf3ec;
    --brand-muted: rgba(202, 89, 27, 0.14);
    --gray: #565554;
    --gray-dark: #3f3d3c;
    --black: #000000;
    --white: #ffffff;

    /* Semantic aliases */
    --teal: var(--brand);
    --teal-dark: var(--brand-dark);
    --teal-deep: var(--black);
    --teal-light: var(--brand-light);
    --gold: var(--brand);
    --gold-dark: var(--brand-dark);

    /* Surfaces & text */
    --text: var(--black);
    --text-muted: var(--gray);
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: #e5e3e2;
    --surface: #f8f7f6;
    --surface-elevated: var(--white);
    --bg: var(--white);

    /* Typography */
    --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --font-display: var(--font);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: clamp(1.5rem, 3vw, 2rem);
    --text-3xl: clamp(2rem, 4vw, 3rem);
    --text-4xl: clamp(2.5rem, 5vw, 3.75rem);

    /* Layout */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-full: 9999px;
    --header-h: 80px;
    --container: min(1240px, 92vw);
    --section-pad: clamp(5rem, 10vw, 7.5rem);

    /* Effects */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.12);
    --shadow-brand: 0 12px 40px rgba(202, 89, 27, 0.32);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-blur: 20px;
    --ring-brand: 0 0 0 4px rgba(202, 89, 27, 0.18);

    /* Gradients (brand colors only) */
    --gradient-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    --gradient-dark: linear-gradient(135deg, var(--black) 0%, var(--gray-dark) 55%, var(--brand-darker) 100%);
    --gradient-surface: linear-gradient(180deg, var(--white) 0%, var(--surface) 100%);
    --gradient-mesh: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(202, 89, 27, 0.12), transparent 50%),
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(86, 85, 84, 0.08), transparent 45%);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition: 0.3s var(--ease-out);
    --transition-fast: 0.15s var(--ease-out);
}

/* Dark mode — surfaces only; brand hex values unchanged */
[data-theme="dark"] {
    --bg: #090909;
    --surface: #111111;
    --surface-elevated: #1a1a1a;
    --text: #f5f4f3;
    --text-muted: #a8a6a5;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: #2a2928;
    --teal-light: rgba(202, 89, 27, 0.12);
    --brand-light: rgba(202, 89, 27, 0.1);
    --glass-bg: rgba(20, 20, 20, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --gradient-surface: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
    --gradient-mesh: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(202, 89, 27, 0.18), transparent 50%),
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(86, 85, 84, 0.15), transparent 45%);
    --shadow-sm: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

::selection {
    background: rgba(202, 89, 27, 0.25);
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: 0.01ms;
        --transition-fast: 0.01ms;
    }
}