/* ============================================================
   KLOSI — Violet Horizon Design Tokens
   Light + Dark themes. Mobile-first. 4px scale.
   ============================================================ */

:root {
  /* —— Brand: Violet Horizon —— */
  --violet-50:  #F4EEFF;
  --violet-100: #E7DAFF;
  --violet-200: #CFB5FF;
  --violet-400: #9B6BF0;
  --violet-600: #6C3CE1; /* primary */
  --violet-800: #4421A3;
  --violet-900: #2C1370;

  /* —— Coral accent —— */
  --coral-50:  #FFF1EF;
  --coral-100: #FFE1DD;
  --coral-200: #FFC2BB;
  --coral-400: #FB8A82;
  --coral-600: #F97066; /* accent */
  --coral-800: #B43E36;
  --coral-900: #7A2520;

  /* —— Amber accent —— */
  --amber-50:  #FFF7EA;
  --amber-100: #FFEBC9;
  --amber-200: #FFD78A;
  --amber-400: #FFC36C;
  --amber-600: #FFB547; /* highlight */
  --amber-800: #B57718;
  --amber-900: #784C09;

  /* —— Semantic: Success (green) —— */
  --green-50:  #EAFBF1;
  --green-100: #CDF4DC;
  --green-200: #97E5B5;
  --green-400: #46C77E;
  --green-600: #1FA85E;
  --green-800: #126E3D;
  --green-900: #084525;

  /* —— Semantic: Danger (red) —— */
  --red-50:  #FEECEC;
  --red-100: #FCD5D5;
  --red-200: #F8AAAA;
  --red-400: #EE6A6A;
  --red-600: #DC3545;
  --red-800: #931C28;
  --red-900: #5E0F18;

  /* —— Semantic: Info (blue) —— */
  --blue-50:  #ECF2FF;
  --blue-100: #D6E2FF;
  --blue-200: #A8BDFF;
  --blue-400: #6584F7;
  --blue-600: #3D5FE0;
  --blue-800: #233A93;
  --blue-900: #122158;

  /* —— Semantic: Teal (accepted) —— */
  --teal-50:  #E6FAF6;
  --teal-100: #C2F2E8;
  --teal-200: #88E0CC;
  --teal-400: #34BFA4;
  --teal-600: #149A7F;
  --teal-800: #0A6354;
  --teal-900: #053D34;

  /* —— Neutrals (cool-leaning gray) —— */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFAFC;
  --gray-50:  #F4F5F8;
  --gray-100: #ECEDF1;
  --gray-200: #DCDEE5;
  --gray-300: #C2C5CF;
  --gray-400: #9498A4;
  --gray-500: #6B6F7C;
  --gray-600: #4F5360;
  --gray-700: #383B46;
  --gray-800: #23252E;
  --gray-900: #15171E;
  --gray-950: #0B0C12;

  /* —— Spacing (4px scale) —— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* —— Radii —— */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* —— Type —— */
  --font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Outfit", "DM Sans", system-ui, sans-serif;

  --fs-caption: 12px;
  --fs-body-sm: 14px;
  --fs-body: 16px;
  --fs-h4: 16px;
  --fs-h3: 20px;
  --fs-h2: 24px;
  --fs-h1: 32px;
  --fs-display: 48px;

  --lh-tight: 1.2;
  --lh-body: 1.5;

  /* —— Motion —— */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* —— Shadows (light theme) —— */
  --shadow-sm: 0 1px 2px rgba(20, 22, 30, .06), 0 1px 1px rgba(20, 22, 30, .04);
  --shadow-md: 0 6px 16px -4px rgba(20, 22, 30, .10), 0 2px 4px rgba(20, 22, 30, .04);
  --shadow-lg: 0 20px 40px -12px rgba(20, 22, 30, .18), 0 4px 8px rgba(20, 22, 30, .06);
  --shadow-xl: 0 32px 64px -16px rgba(20, 22, 30, .24), 0 8px 16px rgba(20, 22, 30, .08);
  --shadow-focus: 0 0 0 3px rgba(108, 60, 225, .25);
}

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --bg-primary:   var(--gray-25);
  --bg-secondary: var(--gray-0);
  --bg-tertiary:  var(--gray-50);
  --bg-inverse:   var(--gray-900);
  --bg-overlay:   rgba(15, 17, 24, .48);

  --text-primary:   rgba(15, 17, 24, .92);
  --text-secondary: rgba(15, 17, 24, .68);
  --text-tertiary:  rgba(15, 17, 24, .60);
  --text-inverse:   rgba(255, 255, 255, .96);
  --text-on-brand:  #FFFFFF;

  --border-primary:   var(--gray-200);
  --border-secondary: var(--gray-100);
  --border-tertiary:  var(--gray-50);

  --brand-primary:   var(--violet-600);
  --brand-primary-hover: var(--violet-800);
  --brand-fg:        var(--violet-600);
  --brand-soft:      var(--violet-50);
  --brand-soft-2:    var(--violet-100);
  --accent-primary:  var(--coral-600);
  --accent-soft:     var(--coral-50);
  --highlight-primary: var(--amber-600);
  --highlight-soft:    var(--amber-50);

  --success-fg: var(--green-800);
  --success-bg: var(--green-50);
  --success-bd: var(--green-200);
  --success-strong: var(--green-600);

  --warning-fg: var(--amber-800);
  --warning-bg: var(--amber-50);
  --warning-bd: var(--amber-200);
  --warning-strong: var(--amber-600);

  --danger-fg: var(--red-800);
  --danger-bg: var(--red-50);
  --danger-bd: var(--red-200);
  --danger-strong: var(--red-600);

  --info-fg: var(--blue-800);
  --info-bg: var(--blue-50);
  --info-bd: var(--blue-200);
  --info-strong: var(--blue-600);
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --bg-primary:   var(--gray-950);
  --bg-secondary: var(--gray-900);
  --bg-tertiary:  var(--gray-800);
  --bg-inverse:   var(--gray-50);
  --bg-overlay:   rgba(0, 0, 0, .64);

  --text-primary:   rgba(244, 245, 248, .92);
  --text-secondary: rgba(244, 245, 248, .72);
  --text-tertiary:  rgba(244, 245, 248, .60);
  --text-inverse:   rgba(15, 17, 24, .92);
  --text-on-brand:  #FFFFFF;

  --border-primary:   #2B2E3A;
  --border-secondary: #1F2129;
  --border-tertiary:  #181A22;

  --brand-primary:   var(--violet-600);
  --brand-primary-hover: var(--violet-400);
  --brand-fg:        var(--violet-400);
  --brand-soft:      rgba(108, 60, 225, .14);
  --brand-soft-2:    rgba(108, 60, 225, .22);
  --accent-primary:  var(--coral-400);
  --accent-soft:     rgba(249, 112, 102, .14);
  --highlight-primary: var(--amber-400);
  --highlight-soft:    rgba(255, 181, 71, .14);

  --success-fg: #8AE3B0;
  --success-bg: rgba(31, 168, 94, .14);
  --success-bd: rgba(31, 168, 94, .35);
  --success-strong: var(--green-400);

  --warning-fg: #FFD78A;
  --warning-bg: rgba(255, 181, 71, .12);
  --warning-bd: rgba(255, 181, 71, .35);
  --warning-strong: var(--amber-400);

  --danger-fg: #F8AAAA;
  --danger-bg: rgba(220, 53, 69, .14);
  --danger-bd: rgba(220, 53, 69, .38);
  --danger-strong: var(--red-400);

  --info-fg: #A8BDFF;
  --info-bg: rgba(61, 95, 224, .16);
  --info-bd: rgba(61, 95, 224, .40);
  --info-strong: var(--blue-400);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .50), 0 2px 4px rgba(0, 0, 0, .30);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .60), 0 4px 8px rgba(0, 0, 0, .35);
  --shadow-xl: 0 32px 64px -16px rgba(0, 0, 0, .70), 0 8px 16px rgba(0, 0, 0, .40);
  --shadow-focus: 0 0 0 3px rgba(155, 107, 240, .35);
}