/* SoulSync design tokens — the one global :root.

   Linked FIRST in index.html, before style.css, so every legacy sheet and
   every React CSS module can read these. Values were picked from the most-used
   existing literals, so swapping a literal for its token is a no-op visually.

   Breakpoints (custom media needs a build step, so these live here as a
   reference only — use the literal in @media):
     480px   small phones
     640px   large phones
     768px   tablets / the mobile layout switch (max-width: 768px)
     1024px  small laptops
     1280px  desktops
*/

:root {
    /* ── Accent ─────────────────────────────────────────────────────────
       Defaults only. The inline <style id="soulsync-initial-appearance"> in
       index.html sets the user's accent before first paint, and init.js
       (applyAccentColor) overwrites it at runtime — both on :root. The rgb
       triplets are comma-separated so rgba(var(--accent-rgb), a) works.
       --accent / --accent-light resolve on :root: an element that scopes its
       own --accent-rgb must also set --accent if it wants it to follow. */
    --accent-rgb: 29, 185, 84;
    --accent-light-rgb: 30, 215, 96;
    --accent-neon-rgb: 34, 255, 107;
    --accent: rgb(var(--accent-rgb));
    --accent-light: rgb(var(--accent-light-rgb));
    --accent-color: var(--accent);

    /* ── White-alpha ramp ───────────────────────────────────────────── */
    --white-a02: rgba(255, 255, 255, 0.02);
    --white-a03: rgba(255, 255, 255, 0.03);
    --white-a04: rgba(255, 255, 255, 0.04);
    --white-a05: rgba(255, 255, 255, 0.05);
    --white-a06: rgba(255, 255, 255, 0.06);
    --white-a07: rgba(255, 255, 255, 0.07);
    --white-a08: rgba(255, 255, 255, 0.08);
    --white-a10: rgba(255, 255, 255, 0.1);
    --white-a12: rgba(255, 255, 255, 0.12);
    --white-a15: rgba(255, 255, 255, 0.15);
    --white-a20: rgba(255, 255, 255, 0.2);
    --white-a30: rgba(255, 255, 255, 0.3);
    --white-a40: rgba(255, 255, 255, 0.4);
    --white-a50: rgba(255, 255, 255, 0.5);
    --white-a60: rgba(255, 255, 255, 0.6);
    --white-a70: rgba(255, 255, 255, 0.7);
    --white-a80: rgba(255, 255, 255, 0.8);
    --white-a85: rgba(255, 255, 255, 0.85);
    --white-a90: rgba(255, 255, 255, 0.9);

    /* ── Surfaces, lines, text ──────────────────────────────────────── */
    --surface-1: var(--white-a03);
    --surface-2: var(--white-a05);
    --surface-3: var(--white-a08);
    --line: var(--white-a08);
    --line-strong: var(--white-a12);
    --text-1: #fff;
    --text-2: var(--white-a70);
    --text-3: var(--white-a50);

    /* Names that older rules already reference. Values match the fallbacks
       most of those rules shipped with; the odd ones out now use literals. */
    --text-primary: #fff;
    --text-secondary: #9aa0aa;
    --text-muted: var(--text-3);
    --bg-primary: #0b0b0f;

    /* ── Status ─────────────────────────────────────────────────────── */
    --danger-rgb: 239, 68, 68;
    --danger: #ef4444;
    --danger-light: #f87171;
    --warning-rgb: 251, 191, 36;
    --warning: #fbbf24;
    --success-rgb: 74, 222, 128;
    --success: #4ade80;
    --info-rgb: 56, 189, 248;
    --info: #38bdf8;

    /* ── Radius ─────────────────────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ── Motion ─────────────────────────────────────────────────────── */
    --dur-fast: 0.15s;
    --dur-base: 0.2s;
    --dur-slow: 0.3s;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Z-index (mapped onto the values the app already uses) ──────── */
    --z-sticky: 10;
    --z-dropdown: 100;
    --z-overlay: 1000;
    --z-modal: 10000;
    --z-toast: 99999;
    --z-tooltip: 100000;

    /* ── Fonts ──────────────────────────────────────────────────────── */
    --font-sans: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Layout ─────────────────────────────────────────────────────── */
    /* One number for the whole settings page. The nav row and the columns
       MUST agree or the tabs and the content below them line up differently. */
    --settings-max-width: 1400px;
}

/* ── Shared keyframes ─────────────────────────────────────────────────
   The single global definition of each name. Keyframe names are global and
   the last definition wins, so never redefine these in another sheet — pick a
   new, prefixed name instead. (CSS modules hash their own names, so a local
   @keyframes there is fine.) */

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}