/* ═══════════════════════════════════════════════════════════════════
   AWVENT WEB PLANNER — DESIGN TOKENS
   Single source of truth for color, type, space, radius, shadow, motion.
   Two themes share these tokens: [data-theme="safe"] and [data-theme="bold"]
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── PALETTE — Navy scale (dark surfaces) ── */
  --navy-900:  #0a1120;
  --navy-800:  #0d1526;   /* sidebar */
  --navy-700:  #162040;   /* elevated dark */
  --navy-600:  #1e2d55;   /* hover dark */
  --navy-500:  #243368;
  --navy-400:  #4a5a7a;   /* disabled-on-dark */
  --navy-300:  #7a8fb0;   /* muted-on-dark */
  --navy-200:  #c0ceea;   /* body-on-dark */
  --navy-100:  #e3ebfa;

  /* ── PALETTE — Off-white scale (light surfaces) ── */
  --paper-0:   #ffffff;
  --paper-50:  #fafbfd;
  --paper-100: #f5f7fc;   /* page bg */
  --paper-200: #eff2f9;
  --paper-300: #e2e8f4;   /* borders */
  --paper-400: #c9d2e4;
  --paper-500: #a8b4ce;

  /* ── PALETTE — Role accents ── */
  --purple:    #9b59b6;   /* Inside Sales */
  --purple-d:  #7d3ca8;
  --purple-l:  rgba(155,89,182,0.12);

  --coral:     #e8613a;   /* Field Sales */
  --coral-d:   #c84d2a;
  --coral-l:   rgba(232,97,58,0.12);

  --teal:      #2ec4a0;   /* CRO / Creator */
  --teal-d:    #1fa380;
  --teal-l:    rgba(46,196,160,0.12);

  --amber:     #f5a623;   /* Admin / warning */
  --amber-d:   #c07800;
  --amber-l:   rgba(245,166,35,0.12);

  --blue:      #4c7cde;   /* Marketer / info */
  --blue-d:    #3360c0;
  --blue-l:    rgba(76,124,222,0.12);

  /* ── PALETTE — Semantic ── */
  --green:     #22a86e;   /* advance / success */
  --green-l:   rgba(34,168,110,0.12);
  --red:       #e84545;   /* disqualify / error */
  --red-l:     rgba(232,69,69,0.10);

  /* ── SEMANTIC ALIASES (the rest of the system uses these) ── */
  --bg:               var(--paper-100);
  --surface:          var(--paper-0);
  --surface-sunken:   var(--paper-100);
  --surface-raised:   var(--paper-0);
  --surface-inverse:  var(--navy-800);
  --border:           var(--paper-300);
  --border-strong:    var(--paper-400);
  --border-dark:      rgba(255,255,255,0.07);

  --fg:               var(--navy-800);
  --fg-muted:         var(--navy-300);
  --fg-faint:         var(--paper-500);
  --fg-inverse:       var(--paper-0);
  --fg-on-dark:       var(--navy-200);
  --fg-on-dark-muted: var(--navy-300);

  --accent:           var(--blue);
  --accent-fg:        var(--blue-d);
  --accent-soft:      var(--blue-l);

  /* ── TYPOGRAPHY ── */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Type scale — modular, weighted toward UI density */
  --text-2xs: 10.5px;
  --text-xs:  11.5px;
  --text-sm:  12.5px;
  --text-base:13.5px;
  --text-md:  14.5px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 64px;

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.03em;
  --tracking-snug:  -0.02em;
  --tracking-normal:0;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.1em;

  /* Font weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;
  --w-black:    800;

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

  /* ── RADIUS ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-3xl:  20px;
  --r-full: 9999px;

  /* ── SHADOW / ELEVATION ── */
  --shadow-xs: 0 1px 2px rgba(13,21,38,0.04);
  --shadow-sm: 0 2px 6px rgba(13,21,38,0.05), 0 1px 2px rgba(13,21,38,0.03);
  --shadow-md: 0 6px 16px rgba(13,21,38,0.07), 0 2px 4px rgba(13,21,38,0.04);
  --shadow-lg: 0 14px 32px rgba(13,21,38,0.10), 0 4px 8px rgba(13,21,38,0.05);
  --shadow-xl: 0 28px 64px rgba(13,21,38,0.16), 0 8px 16px rgba(13,21,38,0.06);
  --shadow-focus-blue:   0 0 0 3px rgba(76,124,222,0.18);
  --shadow-focus-purple: 0 0 0 3px rgba(155,89,182,0.18);
  --shadow-focus-coral:  0 0 0 3px rgba(232,97,58,0.18);

  /* ── MOTION ── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.65, 0, 0.85, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:  cubic-bezier(0.5, 1.5, 0.5, 1);

  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-slower:  600ms;

  /* ── LAYOUT ── */
  --sidebar-w:  220px;
  --topbar-h:   60px;
  --panel-w:    680px;
  --page-px:    32px;
  --page-py:    28px;
  --max-content:1480px;
}

/* ═══ BOLD VARIANT ═══════════════════════════════════════════════════
   Editorial / denser / more confident — same tokens but pushed.
   Activated with <html data-theme="bold">. The Safe variant is default.
   ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="bold"] {
  --bg:           #ebeee8;          /* warmer off-white */
  --surface:      #fafaf7;
  --surface-sunken: #ebeee8;
  --surface-raised: #ffffff;
  --border:       #d9dad2;
  --border-strong:#b8b9ad;

  --fg:           #0c0e10;
  --fg-muted:     #5d6166;
  --fg-faint:     #8a8e94;

  /* Tighten type, exaggerate display */
  --tracking-tight: -0.045em;
  --tracking-snug:  -0.03em;
  --font-display:   'Fraunces', 'Plus Jakarta Sans', serif;

  /* Larger jumps in display scale */
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 44px;
  --text-5xl: 60px;
  --text-6xl: 84px;

  /* Sharper corners for editorial feel */
  --r-md:   4px;
  --r-lg:   6px;
  --r-xl:   8px;
  --r-2xl:  12px;
  --r-3xl:  16px;

  /* Crisper shadows */
  --shadow-sm: 0 1px 0 rgba(12,14,16,0.04), 0 0 0 1px rgba(12,14,16,0.04);
  --shadow-md: 0 2px 0 rgba(12,14,16,0.04), 0 0 0 1px rgba(12,14,16,0.06);
}