/* =============================================================================
   Peakzi Design System — Foundation Tokens (flattened from @peakzi/components)
   Source of truth: peakzi/peakzi-shared-components/src/styles
   Light mode only for this build. Never hardcode hex — use var(--token).
   ============================================================================= */

:root {
  /* ---- BRAND PRIMITIVES — navy anchor ---- */
  --peakzi-navy-950: #0c0b2e;
  --peakzi-navy-900: #14133f;
  --peakzi-navy-800: #1f1e5a;
  --peakzi-navy-700: #2a2972;
  --peakzi-navy-600: #3b3a8e;
  --peakzi-navy-500: #5a59b5;
  --peakzi-navy-300: #a6a5d6;
  --peakzi-navy-100: #e6e6f5;

  /* ---- BRAND PRIMITIVES — gradient spectrum (The Peak) ---- */
  --peakzi-pink:        #eb55ff;
  --peakzi-pink-soft:   #f78fff;
  --peakzi-purple:      #a070f0;
  --peakzi-purple-soft: #c29bf5;
  --peakzi-blue:        #7080f0;
  --peakzi-blue-deep:   #5a7bff;
  --peakzi-blue-soft:   #9ba8f5;

  /* ---- CANONICAL GRADIENTS ---- */
  --gradient-brand:          linear-gradient(135deg, #eb55ff 0%, #a070f0 50%, #7080f0 100%);
  --gradient-brand-soft:     linear-gradient(135deg, #f78fff 0%, #c29bf5 50%, #9ba8f5 100%);
  --gradient-brand-vertical: linear-gradient(180deg, #a070f0 0%, #7080f0 100%);
  --gradient-peak:           linear-gradient(180deg, #eb55ff 0%, #a070f0 55%, #7080f0 100%);
  --gradient-navy-fade:      linear-gradient(180deg, #1f1e5a 0%, #0c0b2e 100%);
  --gradient-dawn:           linear-gradient(135deg, #1f1e5a 0%, #a070f0 80%, #eb55ff 100%);

  /* ---- NEUTRALS — slightly cool ---- */
  --neutral-0:    #ffffff;
  --neutral-25:   #fafafc;
  --neutral-50:   #f5f5f9;
  --neutral-100:  #ededf3;
  --neutral-200:  #d9d9e3;
  --neutral-300:  #bcbccc;
  --neutral-400:  #9494a8;
  --neutral-500:  #6e6e84;
  --neutral-600:  #52526a;
  --neutral-700:  #393950;
  --neutral-800:  #23233a;
  --neutral-900:  #131327;
  --neutral-1000: #000000;

  /* ---- STATUS ---- */
  --success:        #17b26a;
  --success-soft:   #dcfae8;
  --success-strong: #0e7e49;
  --warning:        #f79009;
  --warning-soft:   #fef0c7;
  --warning-strong: #b54708;
  --danger:         #f04438;
  --danger-soft:    #fee4e2;
  --danger-strong:  #b42318;
  --info:           #7080f0;
  --info-soft:      #e6e9fc;

  /* ---- SEMANTIC SURFACES & FOREGROUND — LIGHT MODE ---- */
  --bg:              var(--neutral-0);
  --bg-subtle:       var(--neutral-50);
  --bg-muted:        var(--neutral-100);
  --bg-inverse:      var(--peakzi-navy-900);

  --surface-1:       var(--neutral-0);
  --surface-2:       var(--neutral-25);
  --surface-3:       var(--neutral-50);
  --surface-overlay: rgb(12 11 46 / 0.72);

  --fg:              var(--peakzi-navy-800);
  --fg-1:            var(--peakzi-navy-800);
  --fg-2:            var(--neutral-600);
  --fg-3:            var(--neutral-500);
  --fg-4:            var(--neutral-400);
  --fg-inverse:      var(--neutral-0);
  --fg-accent:       var(--peakzi-purple);
  --fg-link:         var(--peakzi-blue-deep);

  --border-subtle:   var(--neutral-100);
  --border:          var(--neutral-200);
  --border-strong:   var(--neutral-300);
  --border-focus:    var(--peakzi-purple);

  --ring-focus:   rgb(160 112 240 / 0.3);
  --ring-danger:  rgb(240 68 56 / 0.18);

  /* ---- COMPONENT SEMANTICS (theme-adaptive) ---- */
  --nav-bg:            rgb(255 255 255 / 0.72);   /* sticky nav glass */
  --btn-navy-bg:       var(--peakzi-navy-800);    /* secondary solid button */
  --btn-navy-bg-hover: var(--peakzi-navy-700);
  --panel-dark:        var(--peakzi-navy-950);    /* intentionally-dark blocks (problem/footer) */
  --panel-dark-line:   var(--peakzi-navy-700);

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Urbanist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans:    var(--font-body);
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --text-3xs:  10px;
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  80px;
  --text-7xl:  104px;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.16em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ---- SPACING — 4px grid ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- RADIUS ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-3xl:  36px;
  --radius-full: 9999px;

  /* ---- SHADOWS ---- */
  --shadow-xs:  0 1px 2px 0 rgb(31 30 90 / 0.05);
  --shadow-sm:  0 1px 3px 0 rgb(31 30 90 / 0.08), 0 1px 2px -1px rgb(31 30 90 / 0.05);
  --shadow-md:  0 4px 8px -2px rgb(31 30 90 / 0.08), 0 2px 4px -2px rgb(31 30 90 / 0.06);
  --shadow-lg:  0 12px 24px -6px rgb(31 30 90 / 0.12), 0 4px 8px -4px rgb(31 30 90 / 0.08);
  --shadow-xl:  0 24px 48px -12px rgb(31 30 90 / 0.18), 0 8px 16px -8px rgb(31 30 90 / 0.10);
  --shadow-2xl: 0 40px 80px -20px rgb(31 30 90 / 0.24);

  --shadow-glow-purple: 0 8px 32px -4px rgb(160 112 240 / 0.45);
  --shadow-glow-pink:   0 8px 32px -4px rgb(235 85 255 / 0.40);
  --shadow-glow-brand:  0 12px 40px -8px rgb(160 112 240 / 0.35);

  --shadow-inset: inset 0 1px 2px 0 rgb(31 30 90 / 0.06);

  /* ---- MOTION ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    220ms;
  --duration-slow:    380ms;
  --duration-slower:  560ms;

  /* ---- Z-INDEX ---- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* =============================================================================
   DARK MODE — semantic-layer overrides (from design-system/_dark.scss).
   Brand primitives (navy, pink, purple, blue) are unchanged — already dark-ready.
   Activated via [data-theme="dark"] on <html> or the .peakzi-dark utility class.
   ============================================================================= */
:root[data-theme='dark'],
.peakzi-dark {
  /* Backgrounds */
  --bg:              var(--peakzi-navy-950);
  --bg-subtle:       var(--peakzi-navy-900);
  --bg-muted:        var(--peakzi-navy-800);
  --bg-inverse:      var(--neutral-0);

  /* Surfaces */
  --surface-1:       var(--peakzi-navy-900);
  --surface-2:       var(--peakzi-navy-800);
  --surface-3:       var(--peakzi-navy-700);
  --surface-overlay: rgb(0 0 0 / 0.72);

  /* Foreground */
  --fg:              var(--neutral-0);
  --fg-1:            var(--neutral-0);
  --fg-2:            var(--peakzi-navy-300);
  --fg-3:            var(--peakzi-navy-500);
  --fg-4:            var(--peakzi-navy-600);
  --fg-inverse:      var(--peakzi-navy-900);
  --fg-accent:       var(--peakzi-purple-soft);
  --fg-link:         var(--peakzi-blue-soft);

  /* Borders */
  --border-subtle:   var(--peakzi-navy-700);
  --border:          var(--peakzi-navy-600);
  --border-strong:   var(--peakzi-navy-500);
  /* --border-focus stays var(--peakzi-purple) — same in both modes */

  /* Component semantics */
  --nav-bg:            rgb(12 11 46 / 0.72);       /* navy-950 glass */
  --btn-navy-bg:       var(--peakzi-navy-700);     /* lift off the dark page */
  --btn-navy-bg-hover: var(--peakzi-navy-600);
  --panel-dark:        var(--peakzi-navy-900);     /* stay distinct from navy-950 page */
  --panel-dark-line:   var(--peakzi-navy-600);

  /* Status softs need less glare on dark */
  --success-soft:    rgb(23 178 106 / 0.16);
  --warning-soft:    rgb(247 144 9 / 0.16);
  --danger-soft:     rgb(240 68 56 / 0.16);
  --info-soft:       rgb(112 128 240 / 0.16);

  /* Shadows read as glow on dark — deepen them */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md:  0 4px 8px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg:  0 12px 24px -6px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.45);
  --shadow-xl:  0 24px 48px -12px rgb(0 0 0 / 0.6), 0 8px 16px -8px rgb(0 0 0 / 0.45);
  --shadow-2xl: 0 40px 80px -20px rgb(0 0 0 / 0.7);
}

/* =============================================================================
   Element base styles (scoped to [data-theme] per design system)
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--fg-1); margin: 0; }
h1 { font-weight: var(--weight-bold); font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
h2 { font-weight: var(--weight-bold); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h3 { font-weight: var(--weight-semibold); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h4 { font-weight: var(--weight-semibold); font-size: var(--text-lg); line-height: var(--leading-snug); }
h5 { font-weight: var(--weight-semibold); font-size: var(--text-base); line-height: var(--leading-snug); }

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

strong, b { font-weight: var(--weight-semibold); color: var(--fg-1); }
code { font-family: var(--font-mono); font-size: 0.9em; padding: 2px 6px; background: var(--bg-muted); border-radius: var(--radius-xs); color: var(--fg-1); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(160 112 240 / 0.35);
  border-radius: var(--radius-xs);
}

/* =============================================================================
   Typography classes
   ============================================================================= */
.peakzi-h-display { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-7xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tightest); color: var(--fg-1); }
.peakzi-h1 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); color: var(--fg-1); }
.peakzi-h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.peakzi-h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.peakzi-h4 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--fg-1); }
.peakzi-eyebrow { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-accent); }
.peakzi-lede { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-2); text-wrap: pretty; }
.peakzi-p { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-2); text-wrap: pretty; }
.peakzi-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-3); }
.peakzi-code { font-family: var(--font-mono); font-size: 0.9em; padding: 2px 6px; background: var(--bg-muted); border-radius: var(--radius-xs); color: var(--fg-1); }
.peakzi-gradient-text {
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}