/* DWC — Color tokens
 * Source of truth: DWC Brand Guidelines (Company Branding Manual).
 * The palette is built around trust, clarity, and restraint. Six named colors,
 * each with a defined role. Everything else derives from these. */
:root {
  /* ============================================================
   * OFFICIAL BRAND PALETTE  (name → role)
   * ============================================================ */

  /* Timber Green — MAIN. Stability, security, professionalism.
   * Hero & section backgrounds, primary buttons, headings. */
  --dwc-timber-green: #142828;   /* rgb 20/40/40 */

  /* Narvik — SECONDARY. Openness & breathing room; near-white mint surface. */
  --dwc-narvik: #f0faf1;         /* rgb 240/250/241 */

  /* Spectra — LINKS & primary accent text. */
  --dwc-spectra: #306060;        /* rgb 48/96/96 */

  /* Peppermint — ACCENTS. Highlight bars, rings, chips, data shapes. */
  --dwc-peppermint: #ceeed3;     /* rgb 206/238/211 */

  /* Alto — BORDERS. Neutral hairlines & dividers. */
  --dwc-alto: #dadada;           /* rgb 218/218/218 */

  /* Alabasta — SUBTLE BOXES. Near-white fill for panels / list rows. */
  --dwc-alabasta: #fafafa;       /* rgb 250/250/250 */

  /* --- Derived Timber Green steps (surfaces, hovers, gradients) --- */
  --dwc-timber-950: #0b1817;     /* deepest — gradient floor */
  --dwc-timber-800: #1c3634;     /* lifted dark surface / hover */
  --dwc-timber-700: #24423e;     /* dark accent lines */

  /* --- Derived Peppermint steps (rings, progress, soft fills) --- */
  --dwc-peppermint-strong: #a9d9b0; /* ring strokes / donut track */
  --dwc-peppermint-soft: #e4f5e7;   /* very soft mint wash */

  /* --- Neutrals / text --- */
  --dwc-ink: #142828;            /* primary text = Timber Green tone */
  --dwc-graphite: #5a6a68;       /* secondary text (muted teal-gray) */
  --dwc-paper: #ffffff;

  /* ============================================================
   * SEMANTIC TOKENS  (prefer these in components)
   * ============================================================ */
  --surface-page: var(--dwc-paper);
  --surface-muted: var(--dwc-narvik);      /* light section wash */
  --surface-subtle: var(--dwc-alabasta);   /* list rows / subtle boxes */
  --surface-card: var(--dwc-paper);
  --surface-dark: var(--dwc-timber-green);
  --surface-dark-alt: var(--dwc-timber-800);
  --surface-accent: var(--dwc-peppermint);

  --text-primary: var(--dwc-timber-green);
  --text-secondary: var(--dwc-graphite);
  --text-inverse: var(--dwc-paper);
  --text-on-dark-muted: rgba(255, 255, 255, 0.70);
  --text-accent: var(--dwc-spectra);
  --text-link: var(--dwc-spectra);

  --border-subtle: var(--dwc-alto);
  --border-strong: var(--dwc-timber-green);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --action-primary: var(--dwc-timber-green);
  --action-primary-hover: var(--dwc-timber-800);
  --action-inverse: var(--dwc-paper);
  --action-inverse-hover: var(--dwc-narvik);
  --focus-ring: var(--dwc-spectra);

  /* ============================================================
   * LEGACY ALIASES — earlier token names repointed onto the
   * official palette so existing slides/components keep rendering.
   * Prefer the named brand tokens above in new work.
   * ============================================================ */
  --dwc-teal-950: var(--dwc-timber-950);
  --dwc-teal-900: var(--dwc-timber-green);
  --dwc-teal-800: var(--dwc-timber-800);
  --dwc-teal-700: var(--dwc-timber-700);
  --dwc-teal-600: #2f544f;
  --dwc-sage-500: var(--dwc-spectra);       /* eyebrows / index numbers → Spectra */
  --dwc-sage-400: var(--dwc-peppermint);    /* accents / highlights → Peppermint */
  --dwc-mint-300: var(--dwc-peppermint);
  --dwc-mint-200: var(--dwc-peppermint-soft);
  --dwc-mint-100: var(--dwc-narvik);
  --dwc-line: var(--dwc-alto);
  --dwc-cloud: var(--dwc-alabasta);
  --dwc-slate: var(--dwc-graphite);
}