/* ==========================================================================
   Rightlander Design System, Tokens
   B2B compliance & affiliate intelligence. Trust, clarity, proof.
   ========================================================================== */

:root,
[data-theme='light'] {
  /* ------------------------------------------------------------------
     COLOR
     Concept: "Regulatory slate", deep navy as the trust anchor, cyan
     as the signal/action color (calls to mind monitoring + data), with
     warm signal tones reserved for risk/alert contexts.
     Replaces the old yellow+electric-blue with something that looks
     closer to Linear/Stripe/Segment than a consumer promo site.
     ------------------------------------------------------------------ */

  /* Surfaces */
  --color-bg: #fbfbfd;
  --color-surface: #ffffff;
  --color-surface-2: #f5f7fa;
  --color-surface-offset: #eef1f6;
  --color-surface-offset-2: #e4e8f0;
  --color-surface-dynamic: #dde2ec;
  --color-divider: #e5e8ee;
  --color-border: #d5dae3;
  --color-border-strong: #b6bcc8;

  /* Deep brand ink, used for hero, footer, feature sections */
  --color-ink: #0b1a2e;        /* near-black navy */
  --color-ink-2: #0f2440;      /* primary brand navy */
  --color-ink-3: #17314f;
  --color-ink-soft: #1e3a5f;

  /* Brand navy surfaces, these are the ONLY tokens to use for backgrounds
     that should stay dark navy in both light and dark mode (regulators band,
     bottom CTA block, featured testimonial, device mocks, footer). */
  --surface-brand-dark: #0b1a2e;
  --surface-brand-dark-2: #0f2440;
  --surface-brand-dark-3: #17314f;

  /* Text on light surfaces */
  --color-text: #0f1e33;
  --color-text-muted: #516380;
  --color-text-faint: #8a97ac;
  --color-text-inverse: #f5f8ff;

  /* Primary accent, Signal Cyan (CTAs, links, focus) */
  /* Primary blue matches live rightlander.com (#0263E0) */
  --color-primary: #0263E0;
  --color-primary-hover: #0350b8;
  --color-primary-active: #033e8f;
  --color-primary-highlight: #dde9fc;
  --color-primary-soft: #ecf2fd;

  /* Secondary, Neon signal for accents on dark surfaces */
  --color-accent: #4bd4ff;
  --color-accent-2: #7ce0b3;

  /* Semantic */
  --color-success: #0f7a4a;
  --color-success-soft: #e3f4ea;
  --color-warning: #b25a00;
  --color-warning-soft: #fbecd7;
  --color-danger: #b0263c;
  --color-danger-soft: #fbe3e7;

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     One modern sans across the whole site for consistency.
     - Display / UI / Body: Inter Variable (16 weights, tabular figures)
     - Mono (data, code, tickers): JetBrains Mono
     Rationale: Inter is Rightlander's closest-to-current vibe but far
     more consistent; it looks premium at display sizes and legible at
     12px, the B2B SaaS reference (Stripe, Linear, Vercel all ship with
     Inter or close relatives).
     ------------------------------------------------------------------ */
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale */
  --text-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12 → 13 */
  --text-sm:    clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem); /* 13 → 15 */
  --text-base:  clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); /* 15 → 17 */
  --text-lg:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);      /* 17 → 20 */
  --text-xl:    clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);     /* 20 → 26 */
  --text-2xl:   clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);    /* 26 → 38 */
  --text-3xl:   clamp(2rem, 1.4rem + 2.6vw, 3.25rem);         /* 32 → 52 */
  --text-hero:  clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);       /* 40 → 76 */

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

  --tracking-tight:  -0.022em;
  --tracking-tighter: -0.035em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-eyebrow: 0.14em;

  /* ------------------------------------------------------------------
     SPACING, 4px base
     ------------------------------------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Fluid section padding */
  --section-y: clamp(var(--space-16), 8vw, var(--space-32));
  --section-y-sm: clamp(var(--space-10), 6vw, var(--space-20));

  /* Content widths */
  --content-narrow: 680px;
  --content-default: 1040px;
  --content-wide: 1240px;
  --content-full: 1440px;
  --page-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ------------------------------------------------------------------
     RADII, SHADOWS, MOTION
     ------------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Cool-tinted shadows to match the navy palette */
  --shadow-xs: 0 1px 2px rgba(11, 26, 46, 0.04);
  --shadow-sm: 0 2px 4px rgba(11, 26, 46, 0.05), 0 1px 2px rgba(11, 26, 46, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(11, 26, 46, 0.14), 0 2px 6px rgba(11, 26, 46, 0.06);
  --shadow-lg: 0 24px 48px -12px rgba(11, 26, 46, 0.18), 0 4px 12px rgba(11, 26, 46, 0.08);
  --shadow-xl: 0 40px 80px -20px rgba(11, 26, 46, 0.25);

  --shadow-primary-glow: 0 12px 40px -12px rgba(14, 109, 255, 0.45);

  --ring-focus: 0 0 0 3px rgba(14, 109, 255, 0.28);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 400ms;
  --transition-interactive: var(--duration) var(--ease-out);

  /* Grid + patterns */
  --grid-line: rgba(11, 26, 46, 0.06);
  --grid-line-strong: rgba(11, 26, 46, 0.12);
}

/* ------------------------------------------------------------------
   DARK MODE
   ------------------------------------------------------------------ */
[data-theme='dark'] {
  --color-bg: #07101f;
  --color-surface: #0b1a2e;
  --color-surface-2: #0f2440;
  --color-surface-offset: #13294a;
  --color-surface-offset-2: #183055;
  --color-surface-dynamic: #1d3961;
  --color-divider: #1a2f4b;
  --color-border: #23406a;
  --color-border-strong: #345f95;

  --color-ink: #ffffff;
  --color-ink-2: #e6ecf6;
  --color-ink-3: #c8d2e3;
  --color-ink-soft: #aab7cd;

  --color-text: #eaf0fa;
  --color-text-muted: #9aa7bd;
  --color-text-faint: #6b7a93;
  --color-text-inverse: #0f1e33;

  --color-primary: #4e92ff;
  --color-primary-hover: #71a8ff;
  --color-primary-active: #8fbaff;
  --color-primary-highlight: #17335c;
  --color-primary-soft: #112747;

  --color-accent: #4bd4ff;
  --color-accent-2: #7ce0b3;

  --color-success: #4cc58a;
  --color-success-soft: #0e3726;
  --color-warning: #f3a657;
  --color-warning-soft: #3a2511;
  --color-danger: #f27990;
  --color-danger-soft: #3a1620;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 40px 80px -20px rgba(0, 0, 0, 0.7);

  --grid-line: rgba(234, 240, 250, 0.06);
  --grid-line-strong: rgba(234, 240, 250, 0.12);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg: #07101f;
    --color-surface: #0b1a2e;
    --color-surface-2: #0f2440;
    --color-surface-offset: #13294a;
    --color-surface-offset-2: #183055;
    --color-divider: #1a2f4b;
    --color-border: #23406a;
    --color-text: #eaf0fa;
    --color-text-muted: #9aa7bd;
    --color-text-faint: #6b7a93;
    --color-primary: #4e92ff;
    --color-primary-soft: #112747;
    --grid-line: rgba(234, 240, 250, 0.06);
  }
}