/* ==========================================================================
   Promptless Design System — Tokens
   Single source of truth for colors, type, spacing, radii, shadows, motion.
   ========================================================================== */

/* ---------- Typography --------------------------------------------------- */
/* Body + UI: Geist (modern geometric sans, neutral, great at small sizes)  */
/* Display:  Geist (heavier weights carry display work — one family keeps
              the wordmark-adjacent geometry consistent)                    */
/* Mono:     Geist Mono (for code, numerics, IDs)                           */

:root {
  /* -------- Brand -------- */
  --pl-brand-500: #506aea;  /* primary — from logo                          */
  --pl-brand-600: #3f56d4;
  --pl-brand-700: #3345b0;
  --pl-brand-400: #7a8ef2;
  --pl-brand-300: #a5b3f7;
  --pl-brand-200: #cdd4fb;
  --pl-brand-100: #e6eafd;
  --pl-brand-50:  #f2f4fe;

  /* -------- Neutrals (cool-warm, biased just slightly toward brand hue) -- */
  --pl-ink-950: #0b0d14;
  --pl-ink-900: #12141d;
  --pl-ink-800: #1c1f2b;
  --pl-ink-700: #2a2e3d;
  --pl-ink-600: #484c5d;
  --pl-ink-500: #6b6f81;
  --pl-ink-400: #8f93a4;
  --pl-ink-300: #b7bbc9;
  --pl-ink-200: #d7dae3;
  --pl-ink-150: #e4e6ed;
  --pl-ink-100: #eeeff4;
  --pl-ink-75:  #f4f5f8;
  --pl-ink-50:  #f9fafb;
  --pl-white:   #ffffff;

  /* -------- Status -------- */
  --pl-success-500: #1f9d6b;
  --pl-success-100: #dff5ea;
  --pl-warning-500: #d97706;
  --pl-warning-100: #fdeed1;
  --pl-danger-500:  #dc2b4a;
  --pl-danger-100:  #fce0e6;
  --pl-info-500:    #2176d2;
  --pl-info-100:    #dceafa;

  /* -------- Accent (secondary, used sparingly for charts / highlights) -- */
  --pl-accent-violet: #8b5cf6;
  --pl-accent-teal:   #14b8a6;
  --pl-accent-amber:  #f59e0b;
  --pl-accent-pink:   #ec4899;

  /* -------- Semantic (light) -------- */
  --pl-bg:          var(--pl-white);
  --pl-bg-subtle:   var(--pl-ink-50);
  --pl-bg-muted:    var(--pl-ink-75);
  --pl-surface:     var(--pl-white);
  --pl-surface-raised: var(--pl-white);
  --pl-border:      var(--pl-ink-150);
  --pl-border-strong: var(--pl-ink-200);
  --pl-text:        var(--pl-ink-900);
  --pl-text-muted:  var(--pl-ink-500);
  --pl-text-subtle: var(--pl-ink-400);
  --pl-text-inverse: var(--pl-white);
  --pl-focus-ring:  color-mix(in srgb, var(--pl-brand-500) 45%, transparent);

  /* -------- Type -------- */
  --pl-font-sans:    "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pl-font-display: "Geist", ui-sans-serif, sans-serif;
  --pl-font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  --pl-leading-tight:   1.15;
  --pl-leading-snug:    1.3;
  --pl-leading-normal:  1.5;
  --pl-leading-relaxed: 1.65;

  --pl-tracking-tight:  -0.02em;
  --pl-tracking-snug:   -0.01em;
  --pl-tracking-normal: 0;
  --pl-tracking-wide:   0.04em;

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

  /* -------- Radius -------- */
  --pl-radius-xs: 4px;
  --pl-radius-sm: 6px;
  --pl-radius-md: 8px;
  --pl-radius-lg: 12px;
  --pl-radius-xl: 16px;
  --pl-radius-2xl: 24px;
  --pl-radius-pill: 999px;

  /* -------- Shadows (stacked for depth, not gaussian blobs) -------- */
  --pl-shadow-xs: 0 1px 2px rgba(15, 18, 29, 0.05);
  --pl-shadow-sm: 0 1px 2px rgba(15, 18, 29, 0.04), 0 1px 3px rgba(15, 18, 29, 0.06);
  --pl-shadow-md: 0 2px 4px rgba(15, 18, 29, 0.04), 0 4px 12px rgba(15, 18, 29, 0.08);
  --pl-shadow-lg: 0 4px 8px rgba(15, 18, 29, 0.05), 0 12px 32px rgba(15, 18, 29, 0.10);
  --pl-shadow-xl: 0 8px 16px rgba(15, 18, 29, 0.06), 0 24px 64px rgba(15, 18, 29, 0.14);
  --pl-shadow-brand: 0 6px 20px color-mix(in srgb, var(--pl-brand-500) 28%, transparent);

  /* -------- Motion -------- */
  --pl-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --pl-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --pl-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --pl-dur-instant:   80ms;
  --pl-dur-fast:      140ms;
  --pl-dur-base:      220ms;
  --pl-dur-slow:      380ms;

  /* -------- Z-index -------- */
  --pl-z-base:     0;
  --pl-z-raised:   10;
  --pl-z-sticky:   100;
  --pl-z-overlay:  1000;
  --pl-z-modal:    1100;
  --pl-z-popover:  1200;
  --pl-z-toast:    1300;
}

/* -------- Dark mode: only semantic tokens flip -------- */
[data-theme="dark"] {
  --pl-bg:          #0a0c13;
  --pl-bg-subtle:   #0f1119;
  --pl-bg-muted:    #151824;
  --pl-surface:     #12141d;
  --pl-surface-raised: #1a1d29;
  --pl-border:      #242738;
  --pl-border-strong: #30344a;
  --pl-text:        #e8eaf2;
  --pl-text-muted:  #9196a8;
  --pl-text-subtle: #6a6f82;
  --pl-text-inverse: var(--pl-ink-900);
  --pl-focus-ring:  color-mix(in srgb, var(--pl-brand-400) 55%, transparent);

  --pl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --pl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --pl-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35);
  --pl-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.5);
  --pl-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.4), 0 32px 80px rgba(0, 0, 0, 0.6);
}

/* ---------- Base resets that every preview page uses --------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--pl-font-sans);
  color: var(--pl-text);
  background: var(--pl-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--pl-font-display); letter-spacing: var(--pl-tracking-tight); line-height: var(--pl-leading-tight); font-weight: 600; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }