/* ============================================================
   VOICES IN ACTION — Design Tokens
   Project brand palette: deep purple + vivid orange ("IN ACTION")
   Token NAMES kept stable so every page/component re-skins
   automatically. Names retained from the original Mediterranean
   system are now mapped to the project's brand roles.
   ============================================================ */

:root {
  /* -- Brand palette -- (mapped onto legacy token names) ----- */

  /* "Limestone" role → pale lavender / cream — page surfaces */
  --c-limestone:     #F5F0FB;  /* page background, pale lavender cream */
  --c-limestone-2:   #ECE0F7;  /* alt panels, subtle separators */
  --c-limestone-3:   #D9C7F0;  /* deeper lavender borders */
  --c-paper:         #FBF8FE;  /* card surface */
  --c-paper-2:       #FFFFFF;  /* lifted card surface */

  /* "Terracotta" role → vivid orange ("IN ACTION" energy) */
  --c-terracotta:    #F26430;  /* primary accent */
  --c-terracotta-dk: #C04612;
  --c-terracotta-lt: #FA8A5C;

  /* "Turquoise" role → mid royal purple (brand primary) */
  --c-turquoise:     #5B2C9C;
  --c-turquoise-dk: #3D1B6F;
  --c-turquoise-lt: #8B5CF6;

  /* "Honey" role → bright violet highlight */
  --c-honey:         #A78BFA;
  --c-honey-dk:      #7C3AED;
  --c-honey-lt:      #C4B5FD;

  /* "Espresso" role → deep purple-black (text + dark surfaces) */
  --c-espresso:      #1F0F3A;
  --c-espresso-2:    #3D2862;
  --c-espresso-3:    #6B5A8C;

  /* Bougainvillea accent → hot magenta pink (rare punctuation) */
  --c-bougainvillea: #EC4899;
  --c-bougainvillea-lt: #F9A8D4;

  /* Semantic */
  --c-bg:        var(--c-limestone);
  --c-bg-alt:    var(--c-limestone-2);
  --c-surface:   var(--c-paper);
  --c-text:      var(--c-espresso);
  --c-text-2:    var(--c-espresso-2);
  --c-text-mute: var(--c-espresso-3);
  --c-rule:      #C8B5E0;

  /* -- Typography ----------------------------------------------------- */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --type-display: clamp(3rem, 8vw, 7.5rem);
  --type-3xl: clamp(2.5rem, 5vw, 4.25rem);
  --type-2xl: clamp(2rem, 3.6vw, 3.25rem);
  --type-xl:  clamp(1.5rem, 2.4vw, 2rem);
  --type-lg:  1.25rem;
  --type-md:  1.125rem;
  --type-base: 1.0625rem;
  --type-sm:  0.9375rem;
  --type-xs:  0.8125rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --ls-display: -0.02em;
  --ls-eyebrow: 0.16em;
  --ls-tight:   -0.01em;

  /* -- Spacing scale -------------------------------------------------- */
  --s-0:  0.25rem;
  --s-1:  0.5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2.5rem;
  --s-5:  4rem;
  --s-6:  6.5rem;
  --s-7:  9rem;
  --s-8: 12rem;

  /* -- Layout --------------------------------------------------------- */
  --container-max: 1320px;
  --container-narrow: 920px;
  --container-text: 680px;

  /* -- Radii ---------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* -- Shadows -------------------------------------------------------- */
  --shadow-soft:  0 8px 32px rgba(31, 15, 58, 0.10);
  --shadow-lift:  0 16px 48px rgba(31, 15, 58, 0.18);
  --shadow-press: 0 4px 12px rgba(31, 15, 58, 0.22);
  --shadow-inset: inset 0 0 0 1px rgba(31, 15, 58, 0.08);

  /* -- Motion --------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap:  cubic-bezier(0.4, 0.0, 0.2, 1);

  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  600ms;
  --dur-slower: 1200ms;

  /* -- Z-index -------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}