/* WebFreedom - Design Tokens (light theme baseline from redesign-v6-light)
 * Single source of truth. Component CSS only references var(--*).
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -------- Colors: Backgrounds (light) -------- */
  --bg-base:     #F1F1F8;
  --bg-card:     #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-dark:     #1E203D;

  /* -------- Colors: Text -------- */
  --text-primary:   #1E203D;
  --text-secondary: #5A5C7A;
  --text-muted:     #767689;
  --text-on-dark:   #FFFFFF;

  /* -------- Colors: Primary Accent (lavender, single accent) -------- */
  --accent-primary:        #6C5CE7;
  --accent-primary-tint:   rgba(108, 92, 231, 0.10);
  --accent-primary-strong: #5847d4;

  /* -------- Colors: Status -------- */
  --status-success:      #00B894;
  --status-danger:       #E74C3C;
  --status-success-tint: rgba(0, 184, 148, 0.12);
  --status-danger-tint:  rgba(231, 76, 60, 0.12);
  --status-warning:      #d97706;
  --status-warning-bg:   #fffbeb;
  --status-info:         #0284c7;
  --status-info-bg:      #f0f9ff;

  /* -------- Colors: Borders -------- */
  --border-subtle: #EBEBF5;
  --border-strong: rgba(108, 92, 231, 0.45);

  /* -------- Colors: Overlay -------- */
  --overlay: rgba(30, 32, 61, 0.55);

  /* -------- Typography -------- */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --text-h1-size: 2.25rem; --text-h1-lh: 1.1;  --text-h1-ls: -0.02em;  --text-h1-weight: 700;
  --text-h2-size: 1.5rem;  --text-h2-lh: 1.2;  --text-h2-ls: -0.015em; --text-h2-weight: 700;
  --text-h3-size: 1.125rem;--text-h3-lh: 1.3;  --text-h3-ls: -0.01em;  --text-h3-weight: 600;
  --text-body-size: 1rem;     --text-body-lh: 1.55; --text-body-weight: 400;
  --text-body-sm-size: 0.875rem; --text-body-sm-lh: 1.5; --text-body-sm-weight: 400;
  --text-caption-size: 0.75rem; --text-caption-lh: 1.4; --text-caption-ls: 0.01em; --text-caption-weight: 500;

  /* -------- Spacing scale (9 steps) -------- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  /* -------- Radius -------- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* -------- Shadows (tinted to bg, not pure black) -------- */
  --shadow-card:  0 2px 8px rgba(30, 32, 61, 0.06), 0 8px 24px rgba(30, 32, 61, 0.08);
  --shadow-modal: 0 12px 48px rgba(30, 32, 61, 0.18), 0 2px 8px rgba(30, 32, 61, 0.10);

  /* -------- Motion -------- */
  --ease-spring:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;

  /* -------- Layout -------- */
  --container-app:     480px;
  --container-landing: 1280px;
  --container-narrow:  720px;
  --bp-sm: 640px; --bp-md: 960px; --bp-lg: 1280px;

  /* -------- Z-index -------- */
  --z-base: 0; --z-header: 10; --z-dropdown: 50; --z-modal: 100; --z-toast: 200;
}

/* -------- Legacy variable bridge (light theme) --------
 * Old cyberpunk arcade vars are remapped to the new light-premium tokens
 * so existing styles.css and inline styles inherit the white palette
 * without rewriting every consumer.
 */
:root {
  --bg:    var(--bg-base);
  --bg2:   var(--bg-card);
  --card:  var(--bg-card);
  --card2: var(--bg-card);
  --brd:   var(--border-subtle);

  --tx:    var(--text-primary);
  --tx2:   var(--text-secondary);
  --tx3:   var(--text-muted);
  --txb:   var(--text-primary);

  --bl:  var(--accent-primary);
  --blg: var(--accent-primary-tint);
  --cy:  var(--accent-primary-strong);
  --gn:  var(--status-success);
  --or:  var(--text-secondary);
  --rd:  var(--status-danger);
  --pr:  var(--accent-primary);
  --pk:  var(--accent-primary-strong);
  --mg:  var(--status-danger);

  --ease:        var(--ease-spring);
  --font-title:  var(--font-sans);
  --font-body:   var(--font-sans);
}

/* -------- Base reset -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -------- Universal numeric utility -------- */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -------- Kill gradient text-fill (taste-skill ban on heading gradients) -------- */
.logo-freedom,
.hero h1 .highlight,
.text-gradient,
.gt, .gp, .gw,
.plan-name,
.plan-price .amount,
.hacked-title,
.hacked-title .gt,
.hacked-title .gp,
.split-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--accent-primary) !important;
  background-clip: initial !important;
}

/* -------- Force Manrope on decorative selectors (HACKED.ttf removed) -------- */
.hacked-title,
.split-title,
.logo-title,
.plan-name {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
}

/* -------- Kill cyberpunk skew on cards / titles -------- */
.plan-card,
.plan-name,
.landing-price-card,
.bento-item,
.feature-card {
  transform: none !important;
}

/* -------- Force light card backgrounds where dark literals leaked -------- */
.plan-card,
.plan-card.basic,
.plan-card.popular,
.plan-card.family,
.plan-card.corporate,
.plan-card.premium,
.landing-price-card,
.bento-item,
.feature-card,
.info-card,
.pay-accordion,
.pay-accordion-header {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}