/* tokens.css
   WireTrust marketing design tokens — Stripe-style deep navy + electric blue
*/

/* Core, non-theme-specific tokens */
:root {
  /* Layout & typography */
  --wt-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --wt-radius-pill: 9999px;
  --wt-max-width: 1120px;

  /* Status / misc */
  --wt-error: #f97373;
}

/* -----------------------------------------------------------
   DARK THEME (default)
----------------------------------------------------------- */
:root[data-theme="dark"] {
  /* Text */
  --wt-fg: #f9fafb;
  --wt-fg-muted: #9ca3af;

  /* Backgrounds */
  --wt-bg: #020617;
  --wt-bg-input: rgba(15, 23, 42, 0.98);

  /* Borders */
  --wt-border: rgba(148, 163, 184, 0.45);

  /* Surfaces */
  --wt-surface-soft: rgba(15, 23, 42, 0.94);
  --wt-surface-elevated: rgba(15, 23, 42, 0.94);

  /* Dividers */
  --wt-divider-soft: rgba(255, 255, 255, 0.04);
  --wt-divider-soft-vertical: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  --wt-divider-soft-horizontal: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0)
  );

  /* Accent (Stripe-style blues) */
  --wt-accent: #2563eb; /* primary */
  --wt-accent-light: #60a5fa; /* gradient end */
  --wt-accent-muted: #93c5fd; /* subtle/lighter */

  /* “Live” dot */
  --wt-eyebrow-dot: #22c55e;

  /* Background gradients / chrome */
  --wt-gradient-bg: radial-gradient(
    circle at top,
    #111827 0,
    #020617 45%,
    #000000 100%
  );
  --wt-gradient-bg-alt: radial-gradient(
    circle at top,
    #0b1120 0,
    #020617 60%,
    #000000 100%
  );
  --wt-gradient-nav: radial-gradient(
    circle at top,
    rgba(15, 23, 42, 0.95) 0,
    rgba(2, 6, 23, 0.98) 60%,
    rgba(0, 0, 0, 0.96)
  );
}

/* -----------------------------------------------------------
   LIGHT THEME
----------------------------------------------------------- */
:root[data-theme="light"] {
  /* Text */
  --wt-fg: #020617;
  --wt-fg-muted: #6b7280;

  /* Backgrounds */
  --wt-bg: #f9fafb;
  --wt-bg-input: #f3f4f6;

  /* Borders */
  --wt-border: rgba(15, 23, 42, 0.08);

  /* Surfaces */
  --wt-surface-soft: #ffffff;
  --wt-surface-elevated: #ffffff;

  /* Dividers */
  --wt-divider-soft: rgba(15, 23, 42, 0.06);
  --wt-divider-soft-vertical: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(15, 23, 42, 0) 100%
  );
  --wt-divider-soft-horizontal: linear-gradient(
    to right,
    rgba(15, 23, 42, 0.06),
    rgba(15, 23, 42, 0)
  );

  /* Accent (same family) */
  --wt-accent: #2563eb;
  --wt-accent-light: #60a5fa;
  --wt-accent-muted: #3b82f6;

  --wt-eyebrow-dot: #16a34a;

  --wt-gradient-bg: radial-gradient(
    circle at top,
    #e5edff 0,
    #f9fafb 55%,
    #f9fafb 100%
  );
  --wt-gradient-bg-alt: #ffffff;
  --wt-gradient-nav: rgba(249, 250, 251, 0.96);
}