/* ============================================================
   WAFGENE — DESIGN TOKENS
   Palette derived from brand mark: deep violets, ink navy.
   ============================================================ */

:root {
  /* --- Brand violets --- */
  --violet-900: #390A74;
  --violet-800: #5C0796;
  --violet-700: #780AB7;
  --violet-600: #970BD6;   /* primary action colour */
  --violet-500: #A93FDB;
  --orchid-400: #BF4EEC;
  --orchid-300: #C766F4;
  --lilac-200:  #D57CF2;
  --lilac-100:  #EFDBFB;   /* very light tint, backgrounds */

  /* --- Ink (from wordmark) --- */
  --ink-900: #0A1C35;
  --ink-700: #33455C;
  --ink-500: #5B6B80;
  --ink-300: #94A1B3;
  --ink-100: #E4E8EE;
  --ink-050: #F4F6F9;

  /* --- Surfaces --- */
  --paper:      #FFFFFF;
  --paper-tint: #FAF7FD;
  --paper-dusk: #F3EDFA;
  --dark:       #0A1C35;
  --dark-raise: #12294A;

  /* --- Sub-brand accents --- */
  --amber-500: #E8912E;   /* Energy only — sparing use */
  --amber-100: #FBE7CB;

  /* --- Semantic --- */
  --success: #1F8A4C;
  --danger:  #C4362B;

  /* --- Type --- */
  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;

  /* --- Scale --- */
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.4rem, 1.3rem + 0.5vw, 1.6rem);
  --step-3: clamp(1.75rem, 1.55rem + 1vw, 2.2rem);
  --step-4: clamp(2.2rem, 1.85rem + 1.6vw, 3rem);
  --step-5: clamp(2.6rem, 2rem + 2.6vw, 3.8rem);

  /* --- Radii & elevation --- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-rest: 0 1px 2px rgba(10,28,53,0.06), 0 6px 20px rgba(57,10,116,0.06);
  --shadow-raise: 0 10px 30px rgba(57,10,116,0.16), 0 2px 8px rgba(10,28,53,0.08);

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Sub-brand accent overrides, applied via data-site attribute on <body> */
body[data-site="energy"] {
  --accent: var(--amber-500);
  --accent-tint: var(--amber-100);
}
body[data-site="business"] {
  --accent: var(--violet-800);
  --accent-tint: var(--lilac-100);
}
body[data-site="main"],
body[data-site="shop"] {
  --accent: var(--violet-600);
  --accent-tint: var(--lilac-100);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}