/* ============================================================
   KWIQ DESIGN SYSTEM — TOKENS
   ============================================================ */

/* Fuentes cargadas vía next/font en app/layout.tsx (Sora · Inter · JetBrains Mono) */

:root {
  /* ---------- BRAND PALETTE (Kwiq Official) ---------- */
  --kwiq-deep-50:  #e6f0f0;
  --kwiq-deep-100: #c2dadb;
  --kwiq-deep-200: #8bb6b7;
  --kwiq-deep-300: #5d9192;
  --kwiq-deep-400: #356d6e;
  --kwiq-deep-500: #1c5354;
  --kwiq-deep-600: #0d4748;
  --kwiq-deep-700: #034041; /* canonical Deep Background */
  --kwiq-deep-800: #02292a;
  --kwiq-deep-900: #011515;
  --kwiq-deep-950: #000a0a;

  --kwiq-brand-50:  #e8f9f3;
  --kwiq-brand-100: #c8f1e1;
  --kwiq-brand-200: #93e4c5;
  --kwiq-brand-300: #5cd6a8;
  --kwiq-brand-400: #2ecbaa; /* Action / Button */
  --kwiq-brand-500: #14b894;
  --kwiq-brand-600: #09a27e; /* Primary Brand */
  --kwiq-brand-700: #058067;
  --kwiq-brand-800: #045f4d;
  --kwiq-brand-900: #023d32;

  --kwiq-mint-50:  #f0fcf6;
  --kwiq-mint-100: #d9f8e9;
  --kwiq-mint-200: #b6f1d8;
  --kwiq-mint-300: #83efd6; /* Highlight */
  --kwiq-mint-400: #5fdcc1;
  --kwiq-mint-500: #3ec3a6;

  --kwiq-pink-50:  #fdf0f5;
  --kwiq-pink-100: #fbdce8;
  --kwiq-pink-200: #f5b8cf;
  --kwiq-pink-300: #df9cb6; /* Subtle Accent */
  --kwiq-pink-400: #df6d9a; /* Contrast / Alert */
  --kwiq-pink-500: #c84e7e;
  --kwiq-pink-600: #a23b65;
  --kwiq-pink-700: #7a2c4c;

  /* ---------- SEMANTIC COLOR (Dark — default) ---------- */
  --bg:            var(--kwiq-deep-900);
  --bg-elevated:   var(--kwiq-deep-800);
  --bg-surface:    var(--kwiq-deep-700);
  --bg-raised:     #053738;
  --bg-overlay:    rgba(2, 21, 21, 0.72);

  --border:        rgba(131, 239, 214, 0.10);
  --border-strong: rgba(131, 239, 214, 0.22);
  --border-focus:  var(--kwiq-brand-400);

  --text:          #ffffff;
  --text-muted:    rgba(255, 255, 255, 0.72);
  --text-subtle:   rgba(255, 255, 255, 0.52);
  --text-faint:    rgba(255, 255, 255, 0.32);
  --text-inverse:  var(--kwiq-deep-900);

  --primary:       var(--kwiq-brand-600);
  --primary-hover: var(--kwiq-brand-500);
  --primary-fg:    #ffffff;

  --action:        var(--kwiq-brand-400);
  --action-hover:  var(--kwiq-brand-300);
  --action-fg:     var(--kwiq-deep-900);

  --highlight:     var(--kwiq-mint-300);

  --accent:        var(--kwiq-pink-400);
  --accent-soft:   var(--kwiq-pink-300);

  /* status */
  --success:       #2ecbaa;
  --success-bg:    rgba(46, 203, 170, 0.12);
  --warning:       #f5b955;
  --warning-bg:    rgba(245, 185, 85, 0.12);
  --danger:        #ef5a6e;
  --danger-bg:     rgba(239, 90, 110, 0.12);
  --info:          #5cb8ef;
  --info-bg:       rgba(92, 184, 239, 0.12);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Sora", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base:14px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-5xl: 48px;
  --fs-6xl: 64px;
  --fs-7xl: 84px;

  --lh-tight:  1.12;
  --lh-snug:   1.28;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --ls-tight:  -0.025em;
  --ls-snug:   -0.012em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.12em;

  /* ---------- SPACING (4px grid) ---------- */
  --sp-0:  0;
  --sp-px: 1px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  /* ---------- RADIUS ---------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---------- SHADOW (dark-tuned) ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.32);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.36), 0 2px 6px rgba(0,0,0,0.28);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.42), 0 4px 12px rgba(0,0,0,0.32);
  --shadow-xl: 0 32px 64px rgba(0,0,0,0.48), 0 8px 20px rgba(0,0,0,0.36);
  --shadow-glow: 0 0 0 1px rgba(46, 203, 170, 0.4), 0 8px 32px rgba(46, 203, 170, 0.24);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px rgba(255,255,255,0.02);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;
  --dur-slower:  520ms;

  /* ---------- LAYOUT ---------- */
  --sidebar-w: 264px;
  --content-max: 1080px;
  --density: 1;
}

/* ---------- LIGHT MODE ---------- */
[data-theme="light"] {
  --bg:            #fafbfb;
  --bg-elevated:   #ffffff;
  --bg-surface:    #f3f5f5;
  --bg-raised:     #ffffff;
  --bg-overlay:    rgba(15, 30, 30, 0.40);

  --border:        rgba(3, 64, 65, 0.10);
  --border-strong: rgba(3, 64, 65, 0.20);

  --text:          var(--kwiq-deep-900);
  --text-muted:    rgba(3, 64, 65, 0.70);
  --text-subtle:   rgba(3, 64, 65, 0.52);
  --text-faint:    rgba(3, 64, 65, 0.32);
  --text-inverse:  #ffffff;

  --primary:       var(--kwiq-brand-600);
  --primary-hover: var(--kwiq-brand-700);
  --primary-fg:    #ffffff;

  --action:        var(--kwiq-brand-500);
  --action-hover:  var(--kwiq-brand-600);
  --action-fg:     #ffffff;

  --highlight:     var(--kwiq-brand-700);

  --accent:        var(--kwiq-pink-500);
  --accent-soft:   var(--kwiq-pink-200);

  --success:       #058067;
  --success-bg:    rgba(9, 162, 126, 0.10);
  --warning:       #b07208;
  --warning-bg:    rgba(176, 114, 8, 0.10);
  --danger:        #c8344a;
  --danger-bg:     rgba(200, 52, 74, 0.08);
  --info:          #2173a8;
  --info-bg:       rgba(33, 115, 168, 0.08);

  --shadow-xs: 0 1px 2px rgba(3,64,65,0.06);
  --shadow-sm: 0 1px 3px rgba(3,64,65,0.08), 0 1px 2px rgba(3,64,65,0.04);
  --shadow-md: 0 6px 16px rgba(3,64,65,0.08), 0 2px 4px rgba(3,64,65,0.06);
  --shadow-lg: 0 14px 32px rgba(3,64,65,0.10), 0 4px 8px rgba(3,64,65,0.06);
  --shadow-xl: 0 24px 48px rgba(3,64,65,0.14), 0 8px 16px rgba(3,64,65,0.08);
  --shadow-glow: 0 0 0 3px rgba(46, 203, 170, 0.20);
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}

::selection { background: var(--kwiq-brand-400); color: var(--kwiq-deep-900); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }