/* ==========================================================================
   Mentagen Design Tokens
   Genomic mental health intelligence for Swedish clinicians.
   Deep teal primary, warm off-white surfaces, IBM Plex Serif for clinical
   authority, Inter for UI (matches 1177.se / Kry conventions).
   Light-mode Scandinavian aesthetic — lagom: calm, precise, never sterile.
   ========================================================================== */

:root {
  /* ---------- Core palette ---------- */
  --color-deepest:       #1A2F38;   /* teal-tinted dark — text anchor          */
  --color-primary:       #0A6E7A;   /* clinical deep teal                      */
  --color-primary-hover: #085B65;   /* darker teal for interactive states      */
  --color-primary-deep:  #064D56;   /* darkest teal — heavy emphasis           */
  --color-mid:           #5BA8B0;   /* medium teal — secondary elements        */
  --color-light:         #D4EAED;   /* light teal wash — subtle backgrounds    */
  --color-lightest:      #EFF7F8;   /* barely-there teal tint                  */
  --color-accent:        #2E7D6F;   /* sage/moss green — nature, calm          */
  --color-accent-hover:  #256A5E;   /* darker sage                             */
  --color-accent-light:  #D0E8E3;   /* light sage wash                         */
  --color-natural:       #F0ECE6;   /* warm neutral — section backgrounds      */
  --color-natural-dark:  #DDD8D0;   /* warm neutral border                     */
  --color-muted:         #8A9299;   /* muted blue-gray — secondary text        */
  --color-secondary:     #B08D57;   /* muted gold — clinical warmth accent     */
  --color-secondary-light: #D4C098; /* light gold                              */

  /* ---------- Semantic surfaces ---------- */
  --color-surface:       #F7F5F2;   /* warm off-white — main background        */
  --color-surface-alt:   #EDEAE5;   /* slightly darker — alternating rows      */
  --color-surface-card:  #FFFFFF;   /* cards and elevated surfaces             */
  --color-border:        #DDD8D0;   /* primary border                          */
  --color-border-light:  #EAE6E0;   /* subtle border                           */

  /* ---------- Text ---------- */
  --color-text:          #1A2F38;   /* primary text                            */
  --color-text-muted:    #5A6B73;   /* secondary text                          */
  --color-text-dim:      #8A9299;   /* tertiary / placeholder text             */

  /* ---------- Severity (clinical traffic-light) ---------- */
  --color-critical:      #B91C1C;   /* significant concern                     */
  --color-critical-bg:   #FEF2F2;
  --color-critical-border: #FECACA;
  --color-warning:       #C2410C;   /* moderate concern                        */
  --color-warning-bg:    #FFF7ED;
  --color-warning-border: #FED7AA;
  --color-caution:       #A16207;   /* mild concern                            */
  --color-caution-bg:    #FEFCE8;
  --color-caution-border: #FEF08A;
  --color-normal:        #15803D;   /* no concern / favorable                  */
  --color-normal-bg:     #F0FDF4;
  --color-normal-border: #BBF7D0;

  /* ---------- White alpha scale ---------- */
  --white-10: rgba(255, 255, 255, 0.10);
  --white-20: rgba(255, 255, 255, 0.20);
  --white-30: rgba(255, 255, 255, 0.30);
  --white-40: rgba(255, 255, 255, 0.40);
  --white-50: rgba(255, 255, 255, 0.50);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-70: rgba(255, 255, 255, 0.70);
  --white-80: rgba(255, 255, 255, 0.80);
  --white-90: rgba(255, 255, 255, 0.90);
  --white-95: rgba(255, 255, 255, 0.95);

  /* ---------- Deepest alpha scale ---------- */
  --deepest-5:  rgba(26, 47, 56, 0.05);
  --deepest-10: rgba(26, 47, 56, 0.10);
  --deepest-15: rgba(26, 47, 56, 0.15);
  --deepest-20: rgba(26, 47, 56, 0.20);
  --deepest-30: rgba(26, 47, 56, 0.30);
  --deepest-40: rgba(26, 47, 56, 0.40);
  --deepest-50: rgba(26, 47, 56, 0.50);
  --deepest-60: rgba(26, 47, 56, 0.60);
  --deepest-70: rgba(26, 47, 56, 0.70);
  --deepest-80: rgba(26, 47, 56, 0.80);
  --deepest-90: rgba(26, 47, 56, 0.90);
  --deepest-95: rgba(26, 47, 56, 0.95);

  /* ---------- Fluid typography ---------- */
  --text-xs:      clamp(0.75rem,  0.71rem + 0.18vw, 0.8125rem);
  --text-sm:      clamp(0.8125rem, 0.77rem + 0.24vw, 0.875rem);
  --text-base:    clamp(0.9375rem, 0.88rem + 0.30vw, 1.0625rem);
  --text-lg:      clamp(1.125rem, 1.03rem + 0.48vw, 1.3125rem);
  --text-xl:      clamp(1.375rem, 1.22rem + 0.73vw, 1.6875rem);
  --text-2xl:     clamp(1.75rem,  1.51rem + 1.09vw, 2.25rem);
  --text-3xl:     clamp(2.25rem,  1.87rem + 1.82vw, 3.125rem);
  --text-display: clamp(2.75rem,  2.15rem + 2.91vw, 4.125rem);

  /* ---------- Font families ---------- */
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-sans:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Section spacing ---------- */
  --section-xs: clamp(2rem,    1.5rem + 2.42vw,  3rem);
  --section-sm: clamp(3rem,    2.27rem + 3.64vw,  4.5rem);
  --section-md: clamp(4rem,    2.91rem + 5.45vw,  6.5rem);
  --section-lg: clamp(5rem,    3.64rem + 6.79vw,  8rem);
  --section-xl: clamp(6rem,    4.36rem + 8.48vw, 10rem);

  /* ---------- Border radius ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill:  9999px;

  /* ---------- Shadows (teal-tinted, warm) ---------- */
  --shadow-sm:  0 1px 2px var(--deepest-5);
  --shadow-md:  0 4px 12px var(--deepest-10);
  --shadow-lg:  0 8px 24px var(--deepest-15);
  --shadow-xl:  0 16px 48px var(--deepest-20);

  /* ---------- Transitions ---------- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --max-width:        1200px;
  --max-width-narrow:  800px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}