/*
 * 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: graphite base + lime accent + neutral grays.
 * Typography: Inter, strict 6-level scale.
 * Touch: 48px minimum on all interactive elements.
 * Identity: lime (#c6ff00) differentiates us from Hevy's blue.
 *
 * Updated: 2026-04-10 (Design system overhaul)
 */

:root {
    /* GENERATED:colors:start */
    /* Written by scripts/build_design_tokens.py from design/tokens.json —
       edit the JSON, not this block. */
    /* ── Surfaces ── */
    --bg-base: #0e0f11;
    --bg-surface: #1a1c20;
    --bg-elevated: #24272c;
    --bg-input: #15171a;
    --bg-surface-hover: #24272c;
    --bg-input-focus: #24272c;
    --bg-sidebar: #141518;
    --exercise-art-ground: #f4f4f5;
    --muscle-body: #8593a3;
    --muscle-lit: #a6ce5b;

    /* ── Brand ── */
    --color-primary: #c6ff00;
    --color-primary-dark: #a3d600;
    --color-accent-amber: #d8ff4d;
    --color-primary-glow: rgba(198, 255, 0, 0.12);
    --color-primary-muted: rgba(198, 255, 0, 0.6);
    --color-accent-coral: #a3d600;
    --color-accent-warm: #c6ff00;
    --color-vital: #22d3ee;
    --color-vital-dim: #0e7490;

    /* ── Semantic ── */
    --color-success: #4ade80;
    --color-destructive: #ff453a;
    --color-pr-gold: #ffd700;
    --color-info: #0a84ff;
    --color-secondary: #a855f7;
    --color-accent-green: #4ade80;
    --color-accent-red: #ff453a;

    /* ── Text ── */
    --text-primary: #ffffff;
    --text-secondary: #d3d5d9;
    --text-muted: #b4b7bd;
    --text-subtle: #444444;
    --text-disabled: #333333;

    /* ── Lines ── */
    --border-default: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-focus: rgba(198, 255, 0, 0.5);

    /* ── Palette ── */
    --color-accent-violet: #a78bfa;

    /* ── Roles ── */
    --color-accent: #c6ff00;
    --color-live: #c6ff00;
    --color-warning: #ffffff;
    --color-danger: #ff453a;
    --color-record: #ffd700;
    --chart-primary: #c6ff00;
    --chart-secondary: #22d3ee;
/* GENERATED:colors:end */

    /* ── Gradients ───────────────────────────────────── */
    --gradient-primary: var(--color-primary);
    --gradient-warm: var(--color-primary);
    --gradient-brand: var(--color-primary);

    /* ── Typography ──────────────────────────────────── */
    --font-heading: 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', 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.75rem;      /* 12px — 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: none;
    --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: #d8ff4d;
    --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;
}

/* ── Exercise figure ───────────────────────────────────────────────
   The round picture beside an exercise in any list. Never the library
   photograph: free-exercise-db ships wide gym shots, and cropped to
   40px each one is a different coloured blob, so a column of them
   reads as noise. Either the line-art silhouette (white artwork,
   inverted to sit on the light disc) or the body map with the worked
   muscle lit — one ground, one ink, so the column reads as a list.
   Size with `style="--fig:36px"`. */
.ex-figure {
    width: var(--fig, 44px);
    height: var(--fig, 44px);
    flex: 0 0 var(--fig, 44px);
    border-radius: 50%;
    background: var(--exercise-art-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px;
    box-sizing: border-box;
}
.ex-figure img { width: 100%; height: 100%; object-fit: contain; filter: invert(1); }
.ex-figure span, .ex-figure svg { width: 100%; height: 100%; display: block; }

/* "Origyn tier S" under an exercise's name in every list a client chooses
   from (E496): the app's micro line. Untiered rows draw nothing. */
.ex-tier { font-size: var(--text-micro); font-weight: 600; color: var(--text-secondary); margin-top: 1px; }