/* =========================================================
   GuardID Design Tokens
   Source of truth: Website Refresh Design Brief, Section 3.
   Light/dark mode is a token swap only — never hardcode hex
   values in component CSS, reference tokens instead.
   ========================================================= */

:root {
  /* ---- Brand primitives (locked) ---- */
  --guard-violet: #4F18B9;
  --guard-violet-100: #F2ECFC;
  --guard-violet-200: #D6C4F5;
  --guard-violet-300: #A47AE8;
  --guard-violet-400: #7A44D6;
  --guard-violet-600: #3D1291;
  --guard-violet-700: #2C0D6B;
  --guard-violet-800: #1C0845;

  --wellbeing-teal: #00BFA6;
  --wellbeing-teal-100: #E6FBF8;
  --wellbeing-teal-200: #B3F2E9;
  --wellbeing-teal-300: #6EE6D6;
  --wellbeing-teal-400: #33D6BF;
  --wellbeing-teal-600: #00997F;
  --wellbeing-teal-700: #00735F;
  --wellbeing-teal-800: #004D40;

  --ink: #191919;
  --ink-100: #D9D9D9;
  --ink-200: #A6A6A6;
  --ink-300: #666666;
  --ink-400: #3D3D3D;
  --ink-600: #0D0D0D;
  --ink-700: #000000;

  /* ---- Status / utility (proposed — flagged for stakeholder sign-off, see Section 11) ---- */
  --status-error: #FF5C4D;
  --status-warning: #FFB020;
  --status-success: #22C55E;
  --neutral-grey-blue: #8B93A7;
  --soft-lilac: #EDE7F9;

  /* ---- Typography ---- */
  --font-display: "Manrope", "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.85rem + 1.6vw, 3.25rem);
  --fs-3xl: clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radius / elevation ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(25, 25, 25, 0.06), 0 1px 1px rgba(25, 25, 25, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(25, 25, 25, 0.16);
  --shadow-lg: 0 24px 48px -16px rgba(79, 24, 185, 0.22);

  --container-max: 1200px;
  --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
  --transition-base: 240ms cubic-bezier(.4,0,.2,1);

  /* ---- Semantic tokens: LIGHT MODE (default) ---- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #FAFAFC;
  --color-surface: #F4F1FB;
  --color-surface-raised: #FFFFFF;
  --color-text-primary: #191919;
  --color-text-secondary: #5C6270;
  --color-action: #4F18B9;
  --color-action-hover: #3D1291;
  --color-accent: #00BFA6;
  --color-accent-hover: #00997F;
  --color-border: #E4E1EE;
  --color-on-action: #FFFFFF;
  --color-badge-bg: #EDE7F9;

  color-scheme: light;
}

/* ---- Semantic tokens: DARK MODE ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0F0F12;
    --color-bg-alt: #131317;
    --color-surface: #1C1B22;
    --color-surface-raised: #221F29;
    --color-text-primary: #F5F3FA;
    --color-text-secondary: #A6A6B3;
    --color-action: #8A5CF0;
    --color-action-hover: #A47AE8;
    --color-accent: #2FE0C5;
    --color-accent-hover: #6EE6D6;
    --color-border: #2B2A33;
    --color-on-action: #14101F;
    --color-badge-bg: #241E33;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0F0F12;
  --color-bg-alt: #131317;
  --color-surface: #1C1B22;
  --color-surface-raised: #221F29;
  --color-text-primary: #F5F3FA;
  --color-text-secondary: #A6A6B3;
  --color-action: #8A5CF0;
  --color-action-hover: #A47AE8;
  --color-accent: #2FE0C5;
  --color-accent-hover: #6EE6D6;
  --color-border: #2B2A33;
  --color-on-action: #14101F;
  --color-badge-bg: #241E33;
  color-scheme: dark;
}