/* =================================================================
   MSWDO Design Tokens — Sunset Orange & Light Pink
   --------------------------------------------------------------------
   Theme retune (2026-05-07): primary shifted from dark mauve/rose-cocoa
   to deep sunset orange; accent shifted from rose-gold to light pink.
   Variable names (--mauve-*, --rose-*) are kept for compatibility with
   ~195 references across components; the hex values are retuned to the
   new palette. New code may use --orange-* / --pink-* aliases below.
   --------------------------------------------------------------------
   Anti-AI-slop:
   - NO Tailwind indigo (#6366f1)
   - NO sugary baby pink (#ffc0cb), NO Barbie pink
   - NO two-stop trust gradient
   - NO emoji-as-icon
   - NO Inter — Cormorant Garamond display + Inter Tight body for refinement
   - Orange contrast verified: --mauve-700 #a8470a → 5.4:1 on ivory bg (AA)
   - Pink contrast verified: --rose-700 #ad2553 → 6.4:1 on ivory bg (AA)
   ================================================================= */

:root {
  /* ---------- Primary: Sunset Orange (warm, readable, official) ----------
     Name kept as --mauve-* for back-compat with component CSS. */
  --mauve-50:  #fff7ee;
  --mauve-100: #ffe9d2;
  --mauve-200: #ffd0a3;
  --mauve-300: #ffb070;
  --mauve-400: #ff8c3d;
  --mauve-500: #f76f15;
  --mauve-600: #d45a0d;
  --mauve-700: #a8470a;        /* PRIMARY: deep sunset orange */
  --mauve-800: #7e360a;
  --mauve-900: #5a280b;
  --mauve-950: #381807;

  /* ---------- Accent: Light Pink (soft rose, not Barbie) ----------
     Name kept as --rose-* for back-compat. */
  --rose-50:   #fff5f8;
  --rose-100:  #ffe4ed;
  --rose-200:  #ffc7d8;
  --rose-300:  #ff9fbb;
  --rose-400:  #ff709a;
  --rose-500:  #f54a7d;        /* light pink accent */
  --rose-600:  #db2f63;
  --rose-700:  #ad2553;
  --rose-800:  #80213f;
  --rose-900:  #5c172e;

  /* ---------- Champagne (soft gold) ---------- */
  --champagne-50:  #fff9ef;
  --champagne-100: #ffefd1;
  --champagne-200: #ffdda3;
  --champagne-300: #ffc56f;
  --champagne-400: #f2a94d;
  --champagne-500: #d98635;
  --champagne-600: #ac6429;

  /* ---------- Lavender mist (subtle accent layer) ---------- */
  --lavender-50:  #f5f3f9;
  --lavender-100: #e9e4f1;
  --lavender-200: #d3cae3;
  --lavender-300: #b8acd0;
  --lavender-400: #9a8bb9;
  --lavender-500: #7d6ba0;

  /* ---------- Berry (deep emphasis — warm raspberry, bridges orange↔pink) ---------- */
  --berry-500: #c4365e;
  --berry-600: #9c2649;
  --berry-700: #75193a;

  /* ---------- Festival accent notes: used sparingly for official/cultural energy ---------- */
  --fiesta-teal:  #1aa6a6;
  --fiesta-sky:   #2f8ddf;
  --fiesta-leaf:  #5eaa58;
  --fiesta-sun:   #f0be35;
  --fiesta-coral: #df5f4f;

  /* ---------- Warm neutrals — Ivory / Champagne-tinted ---------- */
  --ivory-50:  #fefcf8;        /* page background */
  --ivory-100: #faf5ed;
  --ivory-200: #f3ead9;
  --ivory-300: #e8dcc4;
  --ivory-400: #cdbfa4;
  --ivory-500: #a89c84;
  --ivory-600: #82775f;
  --ivory-700: #5d5444;
  --ivory-800: #3e382c;
  --ivory-900: #221f17;

  /* ---------- Semantic ---------- */
  --success-50:  #effaf3;
  --success-500: #4d9b6f;
  --success-700: #347653;
  --warning-50:  #fdf5e7;
  --warning-500: #d4a017;
  --warning-700: #9d7711;
  --danger-50:   #fbeeea;
  --danger-500:  #c9525c;
  --danger-700:  #9a3a44;
  --info-50:     #f1eef8;
  --info-500:    --lavender-500;
  --info-700:    --lavender-500;

  /* ---------- Surfaces — glass-friendly ivory ---------- */
  --surface-page:    #fffaf6;
  --surface-card:    rgba(255, 255, 255, 0.94);
  --surface-glass:   rgba(255, 248, 242, 0.66);
  --surface-raised:  #ffffff;
  --surface-sunken:  var(--ivory-100);
  --surface-overlay: rgba(63, 42, 54, 0.5);
  --surface-mauve:   var(--mauve-700);

  --text-primary:    var(--ivory-900);
  --text-secondary:  var(--mauve-700);
  --text-muted:      var(--ivory-600);
  --text-inverse:    #ffffff;
  --text-on-rose:    #ffffff;
  --text-on-champagne: var(--mauve-900);
  --text-link:       var(--rose-700);

  --border-subtle:   var(--ivory-200);
  --border-default:  var(--ivory-300);
  --border-strong:   var(--ivory-400);
  --border-focus:    var(--rose-500);

  /* Backward-compatible aliases for older component files. */
  --brand-navy-50:  var(--lavender-50);
  --brand-navy-200: var(--lavender-200);
  --brand-navy-600: var(--mauve-600);
  --brand-navy-700: var(--mauve-700);
  --brand-navy-800: var(--mauve-800);
  --brand-navy-900: var(--mauve-900);
  --brand-gold-50:  var(--champagne-50);
  --brand-gold-200: var(--champagne-200);
  --brand-gold-300: var(--champagne-300);
  --brand-gold-500: var(--champagne-500);
  --brand-gold-800: var(--champagne-600);
  --text-on-gold:   var(--mauve-900);

  /* True-name aliases for the new sunset palette — prefer these in NEW code. */
  --orange-50:  var(--mauve-50);
  --orange-100: var(--mauve-100);
  --orange-200: var(--mauve-200);
  --orange-300: var(--mauve-300);
  --orange-400: var(--mauve-400);
  --orange-500: var(--mauve-500);
  --orange-600: var(--mauve-600);
  --orange-700: var(--mauve-700);
  --orange-800: var(--mauve-800);
  --orange-900: var(--mauve-900);

  --pink-50:    var(--rose-50);
  --pink-100:   var(--rose-100);
  --pink-200:   var(--rose-200);
  --pink-300:   var(--rose-300);
  --pink-400:   var(--rose-400);
  --pink-500:   var(--rose-500);
  --pink-600:   var(--rose-600);
  --pink-700:   var(--rose-700);
  --pink-800:   var(--rose-800);
  --pink-900:   var(--rose-900);

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", "Garamond", "EB Garamond", Georgia, serif;
  --font-body:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 0.75rem;     --fs-14: 0.875rem;    --fs-16: 1rem;
  --fs-18: 1.125rem;    --fs-20: 1.25rem;     --fs-24: 1.5rem;
  --fs-30: 1.875rem;    --fs-36: 2.25rem;     --fs-48: 3rem;
  --fs-60: 3.75rem;

  --lh-tight: 1.15;     --lh-snug: 1.3;       --lh-normal: 1.55;     --lh-loose: 1.7;
  --tracking-display: -0.015em;
  --tracking-caps: 0.12em;

  /* ---------- Spacing scale ---------- */
  --sp-1:  0.25rem;     --sp-2:  0.5rem;      --sp-3:  0.75rem;
  --sp-4:  1rem;        --sp-5:  1.25rem;     --sp-6:  1.5rem;
  --sp-8:  2rem;        --sp-10: 2.5rem;      --sp-12: 3rem;
  --sp-16: 4rem;        --sp-20: 5rem;        --sp-24: 6rem;

  /* ---------- Radius — softer, more generous ---------- */
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    16px;
  --r-xl:    20px;
  --r-2xl:   28px;
  --r-3xl:   40px;
  --r-pill:  9999px;

  /* ---------- Elevation — warm orange-tinted shadow ---------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(140, 70, 30, 0.05), 0 1px 3px rgba(140, 70, 30, 0.04);
  --elev-2: 0 2px 4px rgba(140, 70, 30, 0.06), 0 4px 12px rgba(140, 70, 30, 0.05);
  --elev-3: 0 6px 12px rgba(140, 70, 30, 0.08), 0 12px 28px rgba(140, 70, 30, 0.07);
  --elev-4: 0 12px 24px rgba(140, 70, 30, 0.10), 0 20px 48px rgba(140, 70, 30, 0.09);
  --elev-5: 0 20px 48px rgba(140, 70, 30, 0.12), 0 36px 80px rgba(140, 70, 30, 0.10);

  /* Glass card shadow stack */
  --elev-glass: 0 8px 32px rgba(140, 70, 30, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- Motion ---------- */
  --motion-fast:    120ms;
  --motion-ui:      180ms;
  --motion-medium:  260ms;
  --motion-slow:    420ms;
  --ease-standard:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized:  cubic-bezier(0.2, 0,   0,   1);
  --ease-exit:        cubic-bezier(0.4, 0,   1,   1);
  --ease-silk:        cubic-bezier(0.25, 1, 0.5, 1);

  /* ---------- 3D Button depth ---------- */
  --btn-depth:        4px;
  --btn-depth-press:  1px;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-modal-backdrop: 800;
  --z-modal: 900;
  --z-toast: 1000;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --sidebar-w: 268px;
  --topbar-h: 68px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Subtle ambient gradient overlay on body — sunset orange + light pink mood */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(247, 111, 21, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(245, 74, 125, 0.06), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.app-shell::before,
.wizard-shell::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg,
    var(--fiesta-coral) 0 11%,
    var(--fiesta-teal) 11% 22%,
    var(--champagne-400) 22% 33%,
    var(--fiesta-sky) 33% 44%,
    var(--rose-500) 44% 55%,
    var(--fiesta-leaf) 55% 66%,
    var(--lavender-500) 66% 77%,
    var(--fiesta-sun) 77% 88%,
    var(--berry-500) 88% 100%);
  z-index: var(--z-toast);
  pointer-events: none;
}