/* ==========================================================================
   Werlabs Genomics Design Tokens
   Based on werlabs.se visual identity.
   Primary font: GT Walsheim Pro (licensed) — Plus Jakarta Sans as web fallback.
   ========================================================================== */

:root {
  /* ---------- Brand Colors ---------- */
  --color-coral:         #FF6D5B;
  --color-coral-hover:   #E85A49;
  --color-coral-light:   #FFAA89;
  --color-coral-lighter: #FFE1D5;
  --color-coral-lightest:#FFEFE9;

  --color-green:         #35A76E;
  --color-green-hover:   #2D8F5E;
  --color-green-light:   #A8DBC2;
  --color-green-lighter: #E3F4EC;

  --color-pine:          #1E1E1E;
  --color-pine-deep:     #111111;

  /* ---------- Neutrals ---------- */
  --color-black:         #1E1E1E;
  --color-text:          #1E1E1E;
  --color-text-muted:    #6B6B6B;
  --color-text-dim:      #9B9B9B;
  --color-border:        #E0DDD8;
  --color-border-light:  #EBEBE4;
  --color-surface-alt:   #EBEBE4;
  --color-surface:       #FCFBF9;
  --color-white:         #FFFFFF;
  --color-grey:          #F0F0F0;
  --color-warm:          #F5F0EB;
  --color-cream:         #FFF8F0;

  /* ---------- Status (severity) ---------- */
  --color-status-error:   #930009;
  --color-status-warning: #CF8B38;
  --color-status-success: #107927;

  /* ---------- 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);

  /* ---------- Pine alpha scale ---------- */
  --pine-5:  rgba(30,30,30,0.05);  --pine-10: rgba(30,30,30,0.10);
  --pine-15: rgba(30,30,30,0.15);  --pine-20: rgba(30,30,30,0.20);
  --pine-30: rgba(30,30,30,0.30);  --pine-40: rgba(30,30,30,0.40);
  --pine-50: rgba(30,30,30,0.50);  --pine-60: rgba(30,30,30,0.60);
  --pine-70: rgba(30,30,30,0.70);  --pine-80: rgba(30,30,30,0.80);
  --pine-90: rgba(30,30,30,0.90);  --pine-95: rgba(30,30,30,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-primary: "GT Walsheim Pro", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2rem;      /* 32px */
  --space-6: 2.5rem;    /* 40px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 5rem;      /* 80px */
  --space-10: 6rem;     /* 96px */
  --space-11: 7rem;     /* 112px */
  --space-12: 8rem;     /* 128px */

  /* ---------- 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 (warm-tinted, using pine) ---------- */
  --shadow-sm: 0 1px 2px var(--pine-5);
  --shadow-md: 0 4px 12px rgba(185,180,169,0.20);
  --shadow-lg: 0 8px 24px rgba(185,180,169,0.25);
  --shadow-xl: 0 16px 48px rgba(185,180,169,0.30);

  /* ---------- 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: 750px;
}

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