/*
 * Origyn Design System — Central Design Tokens v2
 * =================================================
 * Single source of truth for all colors, fonts, spacing, and components.
 * Every template references these variables. Change here, update everywhere.
 *
 * Design: OLED-black base + amber energy accent + neutral grays.
 * Typography: Outfit headings + DM Sans body, strict 6-level scale.
 * Touch: 48px minimum on all interactive elements.
 * Identity: Amber (#f59e0b) differentiates us from Hevy's blue.
 *
 * Updated: 2026-04-10 (Design system overhaul)
 */

:root {
    /* ── Brand Colors (Origyn identity — DO NOT change) ── */
    --color-primary: #f59e0b;
    --color-primary-dark: #d97706;
    --color-primary-glow: rgba(245, 158, 11, 0.12);
    --color-primary-muted: rgba(245, 158, 11, 0.6);

    /* ── Semantic Colors ─────────────────────────────── */
    --color-success: #34C759;
    --color-destructive: #FF3B30;
    --color-warning: #FFD60A;
    --color-info: #0A84FF;
    --color-pr-gold: #FFD700;
    --color-secondary: #A855F7;

    /* ── Accent Colors (charts, badges, variety) ──────── */
    --color-accent-warm: #f59e0b;
    --color-accent-coral: #f97316;
    --color-accent-violet: #a78bfa;
    --color-accent-amber: #fbbf24;
    --color-accent-green: #34C759;
    --color-accent-red: #FF3B30;

    /* ── Background Colors (OLED-friendly dark) ──────── */
    --bg-base: #0A0A0A;
    --bg-surface: #1A1A1A;
    --bg-surface-hover: #242424;
    --bg-elevated: #2A2A2A;
    --bg-sidebar: #141414;
    --bg-input: #1E1E1E;
    --bg-input-focus: #242424;

    /* ── Text Colors (high contrast hierarchy) ───────── */
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0A0;
    --text-muted: #666666;
    --text-subtle: #444444;
    --text-disabled: #333333;

    /* ── Border Colors ───────────────────────────────── */
    --border-default: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-strong: rgba(255, 255, 255, 0.14);
    --border-focus: rgba(245, 158, 11, 0.5);

    /* ── Gradients ───────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-warm: linear-gradient(135deg, #f59e0b, #f97316);
    --gradient-brand: linear-gradient(135deg, #f59e0b, #f97316, #a78bfa);
    --gradient-avatar: linear-gradient(135deg, #f59e0b, #ef4444);

    /* ── Typography ──────────────────────────────────── */
    --font-heading: 'Outfit', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Strict 6-level type scale */
    --text-display: 2rem;       /* 32px — key metrics: volume, duration */
    --text-title-1: 1.5rem;     /* 24px — screen titles */
    --text-title-2: 1.25rem;    /* 20px — section headers */
    --text-title-3: 1.0625rem;  /* 17px — exercise names, card titles */
    --text-body: 0.9375rem;     /* 15px — descriptions, paragraphs */
    --text-caption: 0.8125rem;  /* 13px — secondary info, timestamps */
    --text-micro: 0.6875rem;    /* 11px — column headers SET/KG/REPS */

    /* Legacy aliases (backwards compat for trainer panel) */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-input: 16px;

    /* ── Spacing ─────────────────────────────────────── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* ── Radius ──────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow-primary: 0 4px 20px rgba(245, 158, 11, 0.25);
    --shadow-glow-warm: 0 4px 20px rgba(249, 115, 22, 0.2);

    /* ── Transitions ─────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* ── Z-Index Scale ───────────────────────────────── */
    --z-base: 0;
    --z-content: 10;
    --z-sidebar: 50;
    --z-header: 60;
    --z-overlay: 70;
    --z-modal: 80;
    --z-toast: 9999;

    /* ── Touch Targets (48px minimum) ────────────────── */
    --touch-min: 48px;
    --touch-target: 44px;

    /* ── Component: Sidebar ──────────────────────────── */
    --sidebar-width: 240px;

    /* ── Component: Inputs ───────────────────────────── */
    --input-min-height: 48px;
    --input-padding: 12px 14px;

    /* ── Component: Buttons ──────────────────────────── */
    --btn-height: 48px;
    --btn-height-sm: 36px;
    --btn-padding: 12px 20px;
    --btn-padding-sm: 8px 14px;
    --btn-radius: var(--radius-md);

    /* ── RPE Colors (Rate of Perceived Exertion) ──────── */
    --rpe-6: #34C759;
    --rpe-7: #30D158;
    --rpe-7-5: #FFD60A;
    --rpe-8: #FF9F0A;
    --rpe-8-5: #FF6B30;
    --rpe-9: #FF453A;
    --rpe-9-5: #FF2D20;
    --rpe-10: #D70015;

    /* ── Status Colors (trainer panel) ───────────────── */
    --status-waitlist-bg: rgba(251, 191, 36, 0.08);
    --status-waitlist-text: #fbbf24;
    --status-contacted-bg: rgba(56, 189, 248, 0.08);
    --status-contacted-text: #38bdf8;
    --status-trial-bg: rgba(167, 139, 250, 0.08);
    --status-trial-text: #a78bfa;
    --status-active-bg: rgba(52, 199, 89, 0.08);
    --status-active-text: #34C759;
    --status-declined-bg: rgba(255, 59, 48, 0.08);
    --status-declined-text: #FF3B30;
}

/* ── Global Resets ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg-base);
    font-family: var(--font-body);
    color: var(--text-secondary);
    font-size: var(--text-body);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin: 0;
    font-weight: 600;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
[x-cloak] { display: none !important; }

/* ── Utility Classes ─────────────────────────────────── */
.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tabular-nums { font-variant-numeric: tabular-nums; }
.col-header {
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* ── Button Active States ────────────────────────────── */
button:active, .btn:active, a.btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}