/* ======================================================
   1. DESIGN TOKENS
====================================================== */
:root {
    /* =========================
     PRIMITIVE COLORS (HSL)
  ========================= */

    --gray-10: 30 15% 98%;
    --gray-50: 30 10% 94%;
    --gray-100: 30 8% 90%;
    --gray-200: 30 7% 82%;
    --gray-300: 30 6% 70%;
    --gray-600: 30 8% 40%;
    --gray-900: 30 10% 10%;
    --orange-300: 24 90% 92%;
    --orange-500: 24 100% 45%;
    --orange-700: 18 80% 35%;
    --red-500: 8 70% 50%;
    --green-600: 122 46% 33%;
    --yellow-500: 29 100% 47%;
    /* =========================
     SEMANTIC COLORS
  ========================= */

    --color-bg: hsl(var(--gray-10));
    --color-surface: hsl(var(--gray-50));
    --color-surface-soft: hsl(var(--gray-100));
    --color-text: hsl(var(--gray-900));
    --color-text-muted: hsl(var(--gray-600));
    --color-text-faint: hsl(var(--gray-300));
    --color-border: hsl(var(--gray-300));
    --color-border-strong: hsl(var(--gray-600));
    --color-primary: hsl(var(--orange-500));
    --color-primary-soft: hsl(var(--orange-300));
    --color-primary-strong: hsl(var(--orange-700));
    --color-accent: hsl(var(--red-500));
    --color-success: hsl(var(--green-600));
    --color-warning: hsl(var(--yellow-500));
    --color-note: hsl(50 100% 92%);
    --color-highlight: hsl(50 100% 80%);
    --color-line: hsl(var(--gray-900) / 0.75);
    --color-line-soft: hsl(var(--gray-900) / 0.35);
    /* =========================
     INTERACTION TOKENS
  ========================= */

    --color-primary-hover: hsl(var(--orange-500) / 0.9);
    --color-primary-active: hsl(var(--orange-700));
    --opacity-hover: 0.9;
    --opacity-disabled: 0.5;
    --scale-active: 0.98;
    /* =========================
     TYPOGRAPHY
  ========================= */

    --font-display: 'Caveat', cursive;
    --font-hand: 'Patrick Hand', 'Kalam', cursive;
    --font-sketch: 'Kalam', cursive;
    --font-body: 'Open Sans', sans-serif;
    --font-ui: 'Montserrat', sans-serif;
    --text-xs: clamp(10px, 0.6vw, 12px);
    --text-sm: clamp(12px, 0.8vw, 14px);
    --text-md: clamp(14px, 1vw, 16px);
    --text-lg: clamp(16px, 1.2vw, 18px);
    --text-xl: clamp(18px, 1.5vw, 22px);
    --text-2xl: clamp(20px, 2vw, 26px);
    --text-3xl: clamp(24px, 2.5vw, 32px);
    --text-4xl: clamp(28px, 3vw, 40px);
    --text-5xl: clamp(32px, 4vw, 52px);
    --text-6xl: clamp(36px, 5vw, 64px);
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    /* =========================
     SPACING
  ========================= */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    /* =========================
     LAYOUT
  ========================= */

    --container-width: 1200px;
    --grid-columns: 12;
    --grid-gap: var(--space-3);
    /* =========================
     RADIUS + SHADOW
  ========================= */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    /* =========================
     MOTION TOKENS
  ========================= */

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.4);
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 320ms;
    /* =========================
     Z-INDEX SCALE
  ========================= */

    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
}


/* ======================================================
   2. DARK MODE (minimal but functional)
====================================================== */

[data-theme="dark"] {
    --color-bg: hsl(var(--gray-900));
    --color-surface: hsl(var(--gray-600));
    --color-surface-soft: hsl(var(--gray-600) / 0.7);
    --color-text: hsl(var(--gray-10));
    --color-text-muted: hsl(var(--gray-300));
    --color-text-faint: hsl(var(--gray-200));
    --color-border: hsl(var(--gray-300));
    --color-border-strong: hsl(var(--gray-600));
    --color-primary: hsl(var(--orange-300));
    --color-primary-soft: hsl(var(--orange-500));
    --color-primary-strong: hsl(var(--orange-700));
    --color-line: hsl(var(--gray-10) / 0.6);
    --color-line-soft: hsl(var(--gray-10) / 0.25);
}


/* ======================================================
   3. BASE RESET
====================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    background: var(--color-bg);
    color: var(--color-text);
    transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
}




/* ======================================================
   3b. FOCUS STYLES
   Visible keyboard focus ring on every interactive element.
   Uses :focus-visible so mouse users don't see the ring,
   only keyboard/assistive technology users do.
====================================================== */

/* Default ring — covers buttons, inputs, selects, textareas, links */
:focus-visible {
    outline: 2.5px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Inputs get an inset ring so it doesn't fight the border */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2.5px solid var(--color-primary);
    outline-offset: 0;
    box-shadow: 0 0 0 3px hsl(var(--orange-500) / 0.2);
}

/* Remove the default ugly outline now that we have a custom one */
:focus:not(:focus-visible) {
    outline: none;
}

/* ======================================================
   4. TYPOGRAPHY
====================================================== */

h1 {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-bold);
    font-family: var(--font-ui);
}

h2 {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-bold);
    font-family: var(--font-ui);
}

h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    font-family: var(--font-ui);
}

h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    font-family: var(--font-ui);
}

label {
    font-family: var(--font-ui);
    font-weight: var(--font-bold);
    color: var(--color-text-muted);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-md {
    font-size: var(--text-md);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-faint {
    color: var(--color-text-faint);
}


/* ======================================================
   5. LAYOUT SYSTEM
====================================================== */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-3);
}

.layout {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
}

.span-12 {
    grid-column: span 12;
}

.span-9 {
    grid-column: span 9;
}

.span-8 {
    grid-column: span 8;
}

.span-6 {
    grid-column: span 6;
}

.span-4 {
    grid-column: span 4;
}

.span-3 {
    grid-column: span 3;
}

.span-2 {
    grid-column: span 2;
}


/* ======================================================
   6. AUTO GRID
====================================================== */

.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 250px), 1fr));
    gap: var(--grid-gap);
}

.grid-sm {
    --grid-min: 160px;
}

.grid-md {
    --grid-min: 250px;
}

.grid-lg {
    --grid-min: 320px;
}


/* ======================================================
   7. LAYOUT PATTERNS
====================================================== */

.sidebar-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--grid-gap);
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
}

.page {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}


/* ======================================================
   8. UTILITIES
====================================================== */

/* Spacing */
.p-1 {
    padding: var(--space-1);
}

.p-2 {
    padding: var(--space-2);
}

.p-3 {
    padding: var(--space-3);
}

.p-4 {
    padding: var(--space-4);
}

.p-5 {
    padding: var(--space-5);
}

.m-1 {
    margin: var(--space-1);
}

.m-2 {
    margin: var(--space-2);
}

.m-3 {
    margin: var(--space-3);
}

.m-4 {
    margin: var(--space-4);
}

.m-5 {
    margin: var(--space-5);
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-5 {
    gap: var(--space-5);
}

/* Flex helpers */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ======================================================
   9. RESPONSIVE
====================================================== */

@media (max-width: 1024px) {
    .span-9,
    .span-8 {
        grid-column: span 12;
    }
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }

    [class*="span-"] {
        grid-column: span 1;
    }

    .sidebar-layout,
    .split {
        grid-template-columns: 1fr;
    }
}



/* =========================
   Base Button
========================= */

.button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

    /* Active + disabled (shared behavior) */
    .button:active {
        transform: scale(var(--scale-active));
    }

    .button:disabled {
        opacity: var(--opacity-disabled);
        cursor: not-allowed;
    }


/* =========================
   Primary Button
========================= */


.button--primary {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

    .button--primary:hover {
        background: var(--color-primary-hover);
    }

    .button--primary:active {
        background: var(--color-primary-active);
    }



/* =========================
   Secondary Button
========================= */


.button--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

    .button--secondary:hover {
        background: var(--color-surface-soft);
        border-color: var(--color-border-strong);
    }

    .button--secondary:active {
        transform: scale(var(--scale-active));
    }

/* =========================
   Size Varients
========================= */

.button--sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

.button--lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-md);
}