:root {
  --grifflo-primary: #00ADEF;
  --grifflo-primary-light: #42CBFF;
  --grifflo-primary-dark: #007DAD;
  --grifflo-primary-deep: #005475;
  --grifflo-obsidian: #0B0E11;
  --grifflo-obsidian-surface: #1A1D21;
  --grifflo-white: #FFFFFF;
  --grifflo-neutral-50: #F8F9F9;
  --grifflo-neutral-100: #EFF1F2;
  --grifflo-neutral-200: #E1E4E7;
  --grifflo-neutral-300: #C7CBD1;
  --grifflo-neutral-400: #99A2AD;
  --grifflo-neutral-500: #727E8D;
  --grifflo-neutral-600: #59626E;
  --grifflo-neutral-700: #424952;
  --grifflo-neutral-800: #2B3036;
  --grifflo-neutral-900: #17191C;
  --grifflo-success: #12A594;
  --grifflo-warning: #E8A33D;
  --grifflo-error: #E5484D;
  --grifflo-info: #00ADEF;

  --grifflo-light-bg: #FFFFFF;
  --grifflo-light-surface: #F8F9F9;
  --grifflo-light-text: #1A1D21;
  --grifflo-light-text-soft: #59626E;
  --grifflo-light-border: #E1E4E7;
  --grifflo-light-accent: #00ADEF;
  --grifflo-light-link: #005475;
  --grifflo-light-on-accent: #0B0E11;

  --grifflo-text-hero: 56px;
  --grifflo-text-h1: 40px;
  --grifflo-text-h2: 30px;
  --grifflo-text-h3: 22px;
  --grifflo-text-h4: 18px;
  --grifflo-text-body: 16px;
  --grifflo-text-small: 14px;
  --grifflo-text-caption: 12px;
  --grifflo-font-display: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --grifflo-font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

[data-theme="dark"] {
  --grifflo-light-bg: #0B0E11;
  --grifflo-light-surface: #1A1D21;
  --grifflo-light-text: #FFFFFF;
  --grifflo-light-text-soft: #99A2AD;
  --grifflo-light-border: #2B3036;
  --grifflo-light-accent: #00ADEF;
  --grifflo-light-link: #00ADEF;
  --grifflo-light-on-accent: #0B0E11;
}