/* tokens-base.css
   WireTrust shared base design tokens — consumed by both
   wiretrust_io_landing and wiretrust_demo_portal.

   This file is the canonical foundation. Repo-specific overrides
   belong in each repo's own tokens.css.
*/

/* 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-font-monospace:
    ui-monospace, "SF Mono", Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Liberation Mono", "Courier New", monospace;
  --wt-font-tabular:
    system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --wt-border-radius: 8px;
  --wt-radius-pill: 9999px;
  --wt-max-width: 1120px;

  /* Spacing scale (4px base) */
  --wt-space-0: 0;
  --wt-space-1: 0.25rem; /* 4px */
  --wt-space-2: 0.5rem; /* 8px */
  --wt-space-3: 0.75rem; /* 12px */
  --wt-space-4: 1rem; /* 16px */
  --wt-space-5: 1.5rem; /* 24px */
  --wt-space-6: 2rem; /* 32px */
  --wt-space-7: 3rem; /* 48px */
  --wt-space-8: 4rem; /* 64px */

  /* Typography scale */
  --wt-font-size-xs: 0.75rem; /* 12px */
  --wt-font-size-sm: 0.875rem; /* 14px */
  --wt-font-size-base: 1rem; /* 16px */
  --wt-font-size-lg: 1.125rem; /* 18px */
  --wt-font-size-xl: 1.25rem; /* 20px */
  --wt-font-size-2xl: 1.5rem; /* 24px */
  --wt-font-size-3xl: 1.875rem; /* 30px */

  /* Line heights */
  --wt-line-height-tight: 1.25;
  --wt-line-height-normal: 1.55;
  --wt-line-height-body: 1.55;
  --wt-line-height-relaxed: 1.75;

  /* Responsive breakpoints */
  --wt-breakpoint-sm: 640px;
  --wt-breakpoint-md: 768px;
  --wt-breakpoint-lg: 1024px;
  --wt-breakpoint-xl: 1280px;

  /* Accent (Stripe-style blues) */
  --wt-accent: #2563eb;
  --wt-accent-light: #60a5fa;

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

/* -----------------------------------------------------------
   DARK THEME
----------------------------------------------------------- */
: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);
  --wt-border-emphasis: #93c5fd;

  /* 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 (theme-specific) */
  --wt-accent-muted: #93c5fd;

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

  /* Ambient hero effects */
  --wt-ambient-grid-color: rgba(148, 163, 184, 0.06);
  --wt-ambient-glow: radial-gradient(
    ellipse at 40% 40%,
    rgba(37, 99, 235, 0.28) 0%,
    rgba(96, 165, 250, 0.12) 45%,
    transparent 70%
  );

  /* Background gradients / chrome — linear-gradient preferred for compatibility;
     nav uses radial-gradient intentionally for vignette effect */
  --wt-gradient-bg: linear-gradient(
    to bottom,
    #111827 0%,
    #111827 60%,
    #020617 85%,
    #000000 100%
  );
  --wt-gradient-bg-alt: linear-gradient(
    to bottom,
    #0b1120 0%,
    #0b1120 60%,
    #020617 85%,
    #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);
  --wt-border-emphasis: #3b82f6;

  /* 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 (theme-specific) */
  --wt-accent-muted: #3b82f6;

  /* "Live" dot */
  --wt-eyebrow-dot: #16a34a;

  /* Ambient hero effects */
  --wt-ambient-grid-color: rgba(15, 23, 42, 0.05);
  --wt-ambient-glow: none;

  --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);
}