/* SW Demoscopia — unified colour scales.
   Every hue derives from the SW ring logo (navy, teal, rose, salmon, ice).
   500 = exact brand value. Apps must NOT introduce new hues; pick steps from these scales. */
:root {
  /* Navy — text, dark surfaces, neutrals (cool, brand-tinted) */
  --sw-navy-0: #ffffff;
  --sw-navy-25: #f7f9fb;
  --sw-navy-50: #f0f3f5;
  --sw-navy-100: #e4edf1;
  --sw-navy-200: #dde5ea;
  --sw-navy-300: #b9c6d0;
  --sw-navy-400: #7a8fa0;
  --sw-navy-500: #64748b;
  --sw-navy-600: #4a6072;
  --sw-navy-700: #2e4659;
  --sw-navy-800: #1e3447;
  --sw-navy-900: #142535; /* brand navy */
  --sw-navy-950: #0b1620;

  /* Teal — primary accent */
  --sw-teal-50: #eaf7f7;
  --sw-teal-100: #d6f0f1;
  --sw-teal-200: #acdee0;
  --sw-teal-300: #5fd0d3;
  --sw-teal-400: #2bbdc1;
  --sw-teal-500: #0eaaaf; /* brand teal */
  --sw-teal-600: #0b8a8e;
  --sw-teal-700: #086a6e;
  --sw-teal-800: #064b4e;
  --sw-teal-900: #042f31;

  /* Rose — highlight, brand moments, danger */
  --sw-rose-50: #fde8ed;
  --sw-rose-100: #fbd0db;
  --sw-rose-200: #f5a3b8;
  --sw-rose-300: #ee6f92;
  --sw-rose-400: #e6427a;
  --sw-rose-500: #dc1c5d; /* brand rose */
  --sw-rose-600: #b8154d;
  --sw-rose-700: #92103d;
  --sw-rose-800: #6b0c2d;
  --sw-rose-900: #45071d;

  /* Salmon — attention, deadlines, secondary warm accent */
  --sw-salmon-100: #fbe3e6;
  --sw-salmon-300: #ee9aa4;
  --sw-salmon-500: #e7717f; /* brand salmon */
  --sw-salmon-700: #b84e5b;

  /* Ice — soft cool tint for chips, covers, secondary fills */
  --sw-ice-50: #f2f8f9;
  --sw-ice-100: #e6f3f4;
  --sw-ice-300: #b2d5d7; /* brand ice */
  --sw-ice-500: #86b3b6;
  --sw-ice-700: #4f7c7f;

  /* Functional (not brand hues — only for status meaning) */
  --sw-green-500: #16a06a;
  --sw-green-300: #50d890;
  --sw-amber-600: #b86e00;
  --sw-amber-300: #ffc857;

  /* Reward — SWCoin gold (gamified personality only) */
  --sw-gold: #e4c781;
  --sw-gold-ink: #3d2a08;
  --sw-gold-border: #c9a85a;
  --sw-gold-soft: #fbf4df;

  /* Brand anchors (aliases, keep for readability) */
  --sw-navy: var(--sw-navy-900);
  --sw-teal: var(--sw-teal-500);
  --sw-rose: var(--sw-rose-500);
  --sw-salmon: var(--sw-salmon-500);
  --sw-ice: var(--sw-ice-300);
  --sw-white: #ffffff;

  /* RGB channels for alpha mixes */
  --sw-navy-rgb: 20 37 53; /* @kind color */
  --sw-teal-rgb: 14 170 175; /* @kind color */
  --sw-rose-rgb: 220 28 93; /* @kind color */
  --sw-gold-rgb: 228 199 129; /* @kind color */

  /* Gradients — hero accents only, never UI chrome */
  --sw-gradient-brand: linear-gradient(135deg, var(--sw-rose-500) 0%, var(--sw-teal-500) 100%);
  --sw-gradient-soft: linear-gradient(135deg, #d6a5ab 0%, var(--sw-teal-200) 100%);

  /* Data visualisation — categorical (ordered; use in this order) */
  --viz-cat-1: var(--sw-teal-500);
  --viz-cat-2: var(--sw-rose-500);
  --viz-cat-3: #f2a93b;
  --viz-cat-4: #3a7bd5;
  --viz-cat-5: #7a5ac8;
  --viz-cat-6: var(--sw-salmon-500);
  --viz-cat-7: var(--sw-ice-700);
  --viz-cat-8: var(--sw-navy-400);
  /* Sequential (low → high) */
  --viz-seq-1: var(--sw-teal-50);
  --viz-seq-2: var(--sw-teal-200);
  --viz-seq-3: var(--sw-teal-400);
  --viz-seq-4: var(--sw-teal-600);
  --viz-seq-5: var(--sw-teal-800);
  /* Diverging (rose ← neutral → teal) — the brand ring as a scale */
  --viz-div-neg-2: var(--sw-rose-600);
  --viz-div-neg-1: var(--sw-rose-200);
  --viz-div-mid: var(--sw-navy-100);
  --viz-div-pos-1: var(--sw-teal-200);
  --viz-div-pos-2: var(--sw-teal-600);
}