/*
 * Filename: aurora-tokens.css
 * Purpose: Canonical Aurora design tokens — the single source of truth shared by
 *          client-v2, trainer-v2, and (next) admin-v2. Load order on every v2 page:
 *              styles.css  ->  aurora-tokens.css  ->  <app>/app.css
 *          so this file overrides the legacy styles.css palette, and each app.css
 *          adds only its own brand extensions on top.
 *
 *          Keys off the same theme contract as theme.js: dark is the :root default,
 *          light activates under html[data-theme="light"].
 * Last Modified: 2026-07-03
 */

/* ================================================================== */
/*  Dark theme (default)                                              */
/* ================================================================== */
:root {
    /* --- Brand ramp (indigo -> cyan) ------------------------------- */
    --c1: #6366F1;                                  /* indigo — primary */
    --c2: #22D3EE;                                  /* cyan — secondary */
    --grad: linear-gradient(135deg, var(--c1), var(--c2));
    --glow: 0 12px 30px rgba(99, 102, 241, .42);
    --soft: rgba(99, 102, 241, .13);                /* chip / icon tints */
    --track: rgba(148, 163, 184, .18);              /* ring / bar track */
    /* Text-safe cyan: use for cyan-colored TEXT (stat values, eyebrows).
       Same bright cyan on dark; darkened under light for WCAG contrast. */
    --c2-ink: #22D3EE;

    /* --- Semantic accents ----------------------------------------- */
    --accent-primary: var(--c1);
    --accent-secondary: var(--c2);
    --accent-success: #10B981;
    --accent-warning: #F59E0B;
    --accent-danger: #EF4444;
    --accent-pink: #EC4899;

    /* --- Surfaces (neutral charcoal) ------------------------------ */
    --bg-primary: #14171F;
    --bg-secondary: #1C2029;
    --bg-tertiary: #262A34;
    --bg-card: rgba(255, 255, 255, 0.05);

    /* --- Text ----------------------------------------------------- */
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;

    /* --- Borders -------------------------------------------------- */
    --border-color: rgba(255, 255, 255, 0.08);

    /* --- Macro nutrition (protein=indigo, carbs=cyan, fat=pink) ---- */
    --protein-color: var(--c1);
    --carbs-color: var(--c2);
    --fat-color: #EC4899;

    /* --- Elevation / motion --------------------------------------- */
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, .28);
    --shadow-lg: 0 18px 46px rgba(0, 0, 0, .44);
    --canvas-glow: radial-gradient(120% 80% at 50% -10%, rgba(99, 102, 241, .16) 0%, transparent 55%);
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

    /* --- Radius scale --------------------------------------------- */
    --radius-pill: 999px;
    --radius-input: 14px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-card: 26px;

    /* --- Type scale ----------------------------------------------- */
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-base: 15px;
    --fs-md: 17px;
    --fs-lg: 20px;
    --fs-xl: 26px;
    --fs-2xl: 34px;

    /* --- Spacing scale -------------------------------------------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 22px;
    --sp-6: 32px;

    /* --- Typeface ------------------------------------------------- */
    --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ================================================================== */
/*  Light theme                                                       */
/* ================================================================== */
html[data-theme="light"] {
    --glow: 0 10px 26px rgba(99, 102, 241, .22);
    --soft: rgba(99, 102, 241, .10);
    --track: rgba(17, 28, 53, .08);
    /* Darkened cyan so cyan text clears WCAG AA on light surfaces
       (bright #22D3EE is ~1.8:1 on white; this is ~4:1, fine for large/bold). */
    --c2-ink: #0891B2;

    --bg-primary: #F5F7FB;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #EEF1F7;
    --bg-card: rgba(17, 28, 53, 0.03);

    --text-primary: #16203A;
    --text-secondary: #566179;
    /* Contrast fix: was #98a2b6 (~2.6:1) / #718096 — now ~4.6:1 on white. */
    --text-muted: #5D6B84;

    --border-color: rgba(17, 28, 53, 0.08);

    --shadow-sm: 0 4px 14px rgba(20, 33, 69, .06);
    --shadow-lg: 0 12px 34px rgba(20, 33, 69, .11);
    --canvas-glow: radial-gradient(120% 80% at 50% -10%, rgba(99, 102, 241, .12) 0%, transparent 55%);
}