/* CCNDR brand tokens. Sampled from ccndr.ca on 2026-11-12.
   Variable names are a shared contract between the mockup's files: add to them, don't rename them. */
:root {
  /* Purples */
  --ccndr-plum-900: #2b2033;   /* near-black plum: deepest backgrounds, text on light */
  --ccndr-purple-700: #4c2d61; /* primary brand purple */
  --ccndr-violet-500: #8851a1; /* secondary violet */
  --ccndr-lilac-100: #efe2ef;  /* pale lilac tint */

  /* Oranges */
  --ccndr-orange-600: #d36723; /* deep accent */
  --ccndr-orange-500: #df6e26; /* primary accent */
  --ccndr-orange-400: #ee852d; /* light accent */

  /* Neutrals */
  --ccndr-sand-200: #e1dad3;
  --ccndr-paper-100: #f4f3f2;
  --ccndr-white: #ffffff;

  /* Type: Space Grotesk for display, Inter for everything else (both used on ccndr.ca) */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Contrast notes (WCAG AA):
     - white on purple-700 or plum-900: fine at any size
     - white on orange-500/400: large display type only; use plum-900 for small text on orange
     - orange-400 on plum-900: fine at any size */

  /* ---- Added by the story build (additions only; nothing above is renamed) ---- */

  /* Extra steps on the brand ramps, mixed from the sampled colours */
  --ccndr-plum-950: #1c1422;   /* page backdrop behind the stage, deepest vignettes */
  --ccndr-purple-800: #3a2249; /* between plum-900 and purple-700 */
  --ccndr-violet-600: #6f3f86; /* between purple-700 and violet-500 */
  --ccndr-violet-400: #a877bd; /* lighter violet: highlights on purple */
  --ccndr-lilac-300: #c9a8d2;  /* lilac headings on dark plum panels */
  --ccndr-lilac-200: #dfc8e3;
  --ccndr-orange-300: #f5a55a; /* warm highlight */
  --ccndr-orange-200: #fbd0a3; /* warm glow, text on plum */

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --spring: cubic-bezier(.2, 1.35, .35, 1);       /* fallback; js/core.js swaps in a real spring curve where linear() is supported */
  --spring-soft: cubic-bezier(.25, 1.15, .4, 1);

  /* Contrast notes for the added steps:
     - lilac-300 on plum-900 or purple-700: fine at any size
     - violet-500 as a background: white text passes AA at any size (5.6:1)
     - orange-600 on paper-100: large display type only (3.3:1) */
}