/* ============================================================================
   theme.css — Design tokens. Single source of truth for the entire UI.
   Swap this one file to re-theme. Brand identity: Matt Reeder Coaching.
   ============================================================================ */

:root {
    /* ─── Surfaces (5 elevation layers) ─── */
    --surface-0:        #000000;
    --surface-1:        #0b0b0c;
    --surface-2:        #131316;
    --surface-3:        #1c1c20;
    --surface-4:        #26262c;
    --surface-overlay:  rgba(0, 0, 0, 0.72);

    --border-subtle:    #1f1f24;
    --border-default:   #2b2b32;
    --border-strong:    #3a3a44;

    /* ─── Text (semantic, contrast-checked) ─── */
    --text-primary:     #f5f5f7;   /* AAA on surface-0..2 */
    --text-secondary:   #b4b4bd;   /* AA  on surface-0..2 */
    --text-tertiary:    #8a8a94;   /* labels, meta — AA on lifted surfaces only */
    --text-inverted:    #0b0b0c;
    --text-on-accent:   #ffffff;

    /* ─── Brand accent (used sparingly) ─── */
    --accent:           #e65c00;
    --accent-hover:     #ff7519;
    --accent-active:    #cc5000;
    --accent-soft:      rgba(230, 92, 0, 0.12);
    --accent-softer:    rgba(230, 92, 0, 0.06);
    --accent-border:    rgba(230, 92, 0, 0.4);
    --accent-text:      #ff8c3a;   /* accent text on dark surfaces */

    /* ─── Semantic colors ─── */
    --success:          #3dd68c;
    --success-soft:     rgba(61, 214, 140, 0.12);
    --warning:          #f5a524;
    --warning-soft:     rgba(245, 165, 36, 0.12);
    --danger:           #ef4452;
    --danger-soft:      rgba(239, 68, 82, 0.12);
    --info:             #6ea8ff;
    --info-soft:        rgba(110, 168, 255, 0.12);

    /* ─── Typography ─── */
    --font-display:     'Playfair Display', Georgia, serif;
    --font-body:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fs-xs:            0.75rem;    /* 12 */
    --fs-sm:            0.875rem;   /* 14 */
    --fs-base:          1rem;       /* 16 */
    --fs-lg:            1.125rem;   /* 18 */
    --fs-xl:            1.375rem;   /* 22 */
    --fs-2xl:           1.75rem;    /* 28 */
    --fs-3xl:           2.25rem;    /* 36 */
    --fs-4xl:           3rem;       /* 48 */
    --fs-5xl:           3.75rem;    /* 60 */

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

    --lh-tight:         1.2;
    --lh-snug:          1.4;
    --lh-body:          1.65;

    --tracking-tight:   -0.015em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;

    /* ─── Spacing (4px base) ─── */
    --sp-0:             0;
    --sp-1:             4px;
    --sp-2:             8px;
    --sp-3:             12px;
    --sp-4:             16px;
    --sp-5:             24px;
    --sp-6:             32px;
    --sp-7:             48px;
    --sp-8:             64px;
    --sp-9:             96px;

    /* ─── Radius ─── */
    --radius-sm:        6px;
    --radius-md:        10px;
    --radius-lg:        14px;
    --radius-xl:        20px;
    --radius-pill:      999px;

    /* ─── Shadows ─── */
    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-xl:        0 24px 64px rgba(0, 0, 0, 0.7), 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-glow:      0 0 0 4px var(--accent-soft);
    --shadow-glow-danger: 0 0 0 4px var(--danger-soft);

    /* ─── Motion ─── */
    --ease:             cubic-bezier(.4, 0, .2, 1);
    --ease-out:         cubic-bezier(.16, 1, .3, 1);
    --motion-fast:      120ms var(--ease);
    --motion-base:      200ms var(--ease);
    --motion-slow:      320ms var(--ease);

    /* ─── Layout ─── */
    --container:        1200px;
    --container-narrow: 760px;
    --sidebar-w:        260px;
    --header-h:         64px;
    --bottom-tab-h:     64px;

    /* ─── z-index scale ─── */
    --z-sticky:         100;
    --z-drawer:         200;
    --z-modal:          300;
    --z-toast:          400;
    --z-tooltip:        500;
}

/* Reduced motion — collapse all transitions */
@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
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    color: var(--text-primary);
    background: var(--surface-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
}

p { margin: 0; }

a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color var(--motion-fast);
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow);
    border-radius: 2px;
}

::selection { background: var(--accent-soft); color: var(--text-primary); }

/* Scrollbar — dark mode friendly */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    border: 2px solid var(--surface-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--surface-4); }

/* Focus ring for everything that doesn't define its own */
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow);
}

/* ============================================================================
   Type utilities (used sparingly; prefer semantic component classes)
   ============================================================================ */

.t-display    { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
.t-mono       { font-family: var(--font-mono); }
.t-eyebrow    { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.t-muted      { color: var(--text-secondary); }
.t-tertiary   { color: var(--text-tertiary); }
.t-accent     { color: var(--accent-text); }
.t-success    { color: var(--success); }
.t-warning    { color: var(--warning); }
.t-danger     { color: var(--danger); }