/* ============================================================
   UX.IPEK — Color tokens
   Editorial plum + magenta on warm ivory. WCAG-AA minded.
   ============================================================ */

:root {
  /* --- Brand: Plum (primary dark) --------------------------- */
  --plum-950: #14001a;   /* deepest, near-black plum            */
  --plum-900: #1f0022;
  --plum-800: #28002c;   /* PRIMARY brand dark                  */
  --plum-700: #3a1138;
  --plum-600: #55244f;

  /* --- Brand: Magenta (primary accent) ---------------------- */
  --magenta-700: #a30058;
  --magenta-600: #ca006c;  /* SECONDARY / signature accent      */
  --magenta-500: #e0317f;
  --magenta-300: #f29ec5;
  --magenta-100: #fbe1ee;
  --magenta-050: #fdf1f7;

  /* --- Brand: Mauve (harmony) ------------------------------- */
  --mauve-600: #74305f;
  --mauve-500: #8b3a75;
  --mauve-200: #d8bcd0;
  --mauve-050: #f6eef3;

  /* --- Alt neutral-dark (slate, from source sections) ------- */
  --slate-900: #16202e;
  --slate-800: #1e293b;
  --slate-700: #334155;

  /* --- Warm neutrals (ivory scale) -------------------------- */
  --white:    #ffffff;
  --ivory:    #fdfbf8;   /* page background / cream             */
  --sand-100: #f8f7f4;   /* recessed surfaces                   */
  --sand-200: #efece6;
  --sand-300: #e3ded5;

  /* --- Ink (text neutrals, plum-tinted) --------------------- */
  --ink-900: #28002c;
  --ink-700: rgba(40, 0, 44, 0.78);
  --ink-500: rgba(40, 0, 44, 0.58);
  --ink-400: rgba(40, 0, 44, 0.42);
  --ink-300: rgba(40, 0, 44, 0.28);

  /* --- Hairlines / borders ---------------------------------- */
  --line-100: rgba(40, 0, 44, 0.06);
  --line-200: rgba(40, 0, 44, 0.10);
  --line-300: rgba(40, 0, 44, 0.16);
  --line-on-dark: rgba(255, 255, 255, 0.12);

  /* --- Semantic accents ------------------------------------- */
  --green-700: #126c43;
  --green-600: #198754;   /* success / "strategy"               */
  --green-050: #e7f3ed;
  --orange-600: #c8492d;
  --orange-500: #e0583a;  /* warm / warning                     */
  --orange-050: #fcebe6;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:     var(--ivory);
  --surface-card:     var(--white);
  --surface-recessed: var(--sand-100);
  --surface-inverse:  var(--plum-800);
  --surface-inverse-alt: var(--slate-800);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-dark:  rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.60);
  --text-accent:   var(--magenta-600);

  /* Lines & borders */
  --border-subtle: var(--line-100);
  --border-default: var(--line-200);
  --border-strong: var(--line-300);

  /* Interactive — primary (magenta) */
  --action-primary:        var(--magenta-600);
  --action-primary-hover:  var(--magenta-700);
  --action-primary-text:   var(--white);

  /* Interactive — dark (plum) */
  --action-dark:        var(--plum-800);
  --action-dark-hover:  var(--plum-900);
  --action-dark-text:   var(--white);

  /* Focus ring */
  --focus-ring: var(--magenta-500);
}