/* ============================================================
   myshift.uk — SHARED DESIGN TOKENS (single source of truth)

   Loaded by app.html, onboarding.html and index.html AFTER each
   page's inline styles, so these values win. Each page keeps an
   inline copy of the tokens it uses as a built-in fallback — if
   this file ever fails to load, nothing breaks, the page just
   falls back to its local values.

   Values are taken verbatim from app.html (the flagship surface)
   so adopting this file aligns onboarding to the app, not the
   other way round. Edit colours here, not in the pages.
   ============================================================ */

:root {
  /* Brand */
  --accent: #0d9488;
  --accent-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  --color-primary: #0d9488;
  --color-primary-hover: #0f766e;
  --color-primary-light: #14b8a6;
  --color-primary-glow: rgba(13, 148, 136, 0.25);
  --color-accent: #7c3aed;
  --color-accent-light: #a78bfa;

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Surfaces */
  --bg-page: #f3f4f6;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-card-alt: #f8fafc;
  --bg-subtle: #e2e8f0;
  --bg-secondary: rgba(255, 255, 255, 0.9);
  --bg-overlay: rgba(26, 32, 44, 0.6);
  --bg-input: #ffffff;
  --bg-header: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);

  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  --text-accent: var(--color-primary);

  /* Borders */
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --border-medium: rgba(0, 0, 0, 0.06);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  --gradient-accent: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);

  /* Shadows */
  --shadow: rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 14px rgba(13, 148, 136, 0.25);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --accent: #14b8a6;
  --accent-gradient: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);
  --shadow: rgba(0, 0, 0, 0.3);

  --bg-page: #0b1120;
  --bg-card: #1e293b;
  --bg-card-hover: rgba(255, 255, 255, 0.12);
  --bg-card-alt: #1a2332;
  --bg-subtle: #334155;
  --bg-secondary: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(0, 0, 0, 0.85);
  --bg-input: #162032;

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --border-color: rgba(255, 255, 255, 0.1);
  --border-medium: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.05);

  --color-primary: #14b8a6;
  --color-primary-hover: #0d9488;
  --color-primary-light: #2dd4bf;
  --color-accent-light: #c4b5fd;

  --gradient-primary: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 4px 14px rgba(20, 184, 166, 0.3);
}