/* site/assets/css/tokens.css
   Design tokens — dark (default) + light theme.
   Source of truth: Dosimétrika Design System-handoff/dosim-trika-design-system/project/colors_and_type.css */

:root {
  /* ===== BRAND CORE ===== */
  --brand-violet: #440955;
  --brand-ink:    #13001F;
  --brand-cyan:   #00ADEF;
  --brand-blue:   #0F0E80;

  /* ===== VIOLET SCALE ===== */
  --violet-950: #0B0010;
  --violet-900: #13001F;
  --violet-800: #1E0A2E;
  --violet-700: #2A1140;
  --violet-600: #380B49;
  --violet-500: #440955;
  --violet-400: #5E2A70;
  --violet-300: #80548E;
  --violet-200: #A98BB4;
  --violet-100: #D8C9DF;

  /* ===== CYAN SCALE ===== */
  --cyan-600: #0078A6;
  --cyan-500: #008FC4;
  --cyan-400: #00ADEF;
  --cyan-300: #4FC7F5;
  --cyan-200: #9CE0FA;
  --cyan-100: #D4F1FD;

  /* ===== BLUE SCALE ===== */
  --blue-700: #0A0A5C;
  --blue-600: #0F0E80;
  --blue-500: #1C1BA8;
  --blue-400: #3A39C9;

  /* ===== GRADIENTS ===== */
  --grad-brand:      linear-gradient(100deg, #440955 0%, #0F0E80 52%, #00ADEF 100%);
  --grad-brand-soft: linear-gradient(120deg, #2A1140 0%, #0F0E80 62%, #008FC4 110%);
  --grad-cyan:       linear-gradient(100deg, #0F0E80 0%, #00ADEF 100%);
  --grad-blue:       linear-gradient(110deg, #0A0A5C 0%, #1C1BA8 50%, #00ADEF 120%);
  --grad-violet:     linear-gradient(135deg, #13001F 0%, #440955 100%);

  /* ===== DARK THEME (default) ===== */
  --bg-0: #0B0010;
  --bg-1: #13001F;
  --bg-2: #1B0A29;
  --bg-3: #241036;
  --bg-4: #30184A;

  --fg-1: #F4EEFA;
  --fg-2: #BBAACB;
  --fg-3: #8A7AA0;
  --fg-inv: #13001F;

  --border-1: rgba(168,139,180,0.16);
  --border-2: rgba(168,139,180,0.28);
  --border-strong: rgba(168,139,180,0.40);

  --accent: var(--brand-cyan);
  --accent-press: var(--cyan-500);
  --accent-fg: #03202C;
  --ring: rgba(0,173,239,0.55);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.65);
  --glow-cyan: 0 0 0 1px rgba(0,173,239,0.35), 0 8px 30px -6px rgba(0,173,239,0.45);
  --glow-cyan-soft: 0 6px 24px -8px rgba(0,173,239,0.40);

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-display: clamp(40px, 6vw, 72px);
  --t-h1:      clamp(34px, 4.6vw, 56px);
  --t-h2:      clamp(27px, 3.2vw, 40px);
  --t-h3:      clamp(21px, 2.1vw, 27px);
  --t-h4:      clamp(18px, 1.5vw, 21px);
  --t-body-lg: 18px;
  --t-body:    16px;
  --t-small:   14px;
  --t-caption: 12.5px;
  --t-metric:  clamp(38px, 5vw, 60px);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.62;
  --ls-tight: -0.02em;
  --ls-wide:  0.16em;
}

/* ---- LIGHT THEME ------------------------------------------ */
[data-theme="light"] {
  --bg-0: #EDE7F4;
  --bg-1: #FFFFFF;
  --bg-2: #E9E2F1;
  --bg-3: #F0EAF7;
  --bg-4: #E2D9EE;

  --fg-1: #170025;
  --fg-2: #463656;
  --fg-3: #786A88;
  --fg-inv: #FFFFFF;

  --border-1: rgba(68,9,85,0.14);
  --border-2: rgba(68,9,85,0.22);
  --border-strong: rgba(68,9,85,0.34);

  --accent-fg: #FFFFFF;

  --shadow-md: 0 10px 30px -12px rgba(23,0,37,0.18);
  --shadow-lg: 0 30px 70px -24px rgba(23,0,37,0.22);
  --glow-cyan-soft: 0 8px 26px -10px rgba(0,173,239,0.45);
}