/* ==========================================================================
   REVERON EMPIRE — Design tokens
   Brand palette is locked. Semantic tokens below map the palette to roles.
   ========================================================================== */

:root {
  /* Brand palette (locked) */
  --re-graphite: #0B0D10;
  --re-surface: #11151C;
  --re-blue: #1268F3;
  --re-signal-blue: #38A0FF;
  --re-steel: #8CA3C7;
  --re-ice: #EDF4FF;
  --re-white: #FAFBFD;

  /* Brand gradient — use sparingly (accents only) */
  --re-gradient: linear-gradient(135deg, #1268F3 0%, #38A0FF 100%);

  /* Supporting neutrals derived from the palette */
  --re-surface-2: #171C25;
  --re-surface-3: #1E2531;
  --re-blue-deep: #0B4FC4;      /* hover state for primary buttons */
  --re-ink: #0B0D10;
  --re-slate: #4A5871;          /* muted text on light (≈7:1 on white) */
  --re-mist: #DCE4F0;           /* hairlines on light */

  /* Semantic: backgrounds */
  --color-bg: var(--re-white);
  --color-bg-dark: var(--re-graphite);
  --color-surface-dark: var(--re-surface);
  --color-bg-ice: var(--re-ice);

  /* Semantic: text */
  --color-text: var(--re-graphite);
  --color-text-muted: var(--re-slate);
  --color-text-inverse: var(--re-white);
  --color-text-inverse-muted: var(--re-steel);
  --color-accent: var(--re-blue);
  --color-accent-on-dark: var(--re-signal-blue);

  /* Semantic: borders */
  --color-border: var(--re-mist);
  --color-border-strong: #B9C6DA;
  --color-border-dark: rgba(140, 163, 199, 0.16);
  --color-border-dark-strong: rgba(140, 163, 199, 0.32);

  /* Semantic: states */
  --color-focus: var(--re-signal-blue);
  --color-success: #1FA672;
  --color-success-bg: rgba(31, 166, 114, 0.1);
  --color-error: #D93B3B;
  --color-error-bg: rgba(217, 59, 59, 0.08);
  --color-warning: #E8A317;
  --color-warning-bg: rgba(232, 163, 23, 0.12);

  /* Typography */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --fs-h2: clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem);
  --fs-display: clamp(2.6rem, 0.6rem + 9.2vw, 9rem);
  --fs-mega: clamp(5rem, 2rem + 14vw, 16rem);

  --lh-tight: 0.92;
  --lh-heading: 1;
  --lh-body: 1.65;
  --tracking-display: -0.035em;
  --tracking-label: 0.18em;

  /* Spacing scale */
  --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;
  --space-10: 8rem;
  --section-pad: clamp(5rem, 3rem + 7vw, 10rem);

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 0.5rem + 2.6vw, 3rem);
  --header-h: 76px;
  /* Left edge of container content and the REVERON route spine (in the margin).
     CSS defaults; animations.js refines them to exact pixels at runtime. */
  --content-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  --spine-x: max(calc(var(--content-left) / 2), calc(var(--content-left) - 44px));

  /* Radii */
  --radius-xs: 3px;
  --radius-btn: 6px;
  --radius-card: 12px;

  /* Shadows (subtle — no glow overload) */
  --shadow-sm: 0 1px 2px rgba(11, 13, 16, 0.06), 0 2px 8px rgba(11, 13, 16, 0.04);
  --shadow-md: 0 10px 30px -12px rgba(11, 13, 16, 0.18);
  --shadow-lg: 0 30px 60px -24px rgba(11, 13, 16, 0.35);
  --shadow-blue: 0 12px 32px -14px rgba(18, 104, 243, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 180ms;
  --dur-ui: 380ms;
  --dur-reveal: 900ms;

  /* Z-index */
  --z-header: 100;
  --z-menu: 90;
  --z-rail: 50;
  --z-skip: 200;
}

/* Section themes: components read --section-* so they adapt automatically. */
.theme-light {
  --section-bg: var(--re-white);
  --section-text: var(--color-text);
  --section-muted: var(--color-text-muted);
  --section-border: var(--color-border);
  --section-border-strong: var(--color-border-strong);
  --section-surface: #FFFFFF;
  --section-accent: var(--re-blue);
}

.theme-ice {
  --section-bg: var(--re-ice);
  --section-text: var(--color-text);
  --section-muted: var(--color-text-muted);
  --section-border: #D3DEEE;
  --section-border-strong: #AFC0D9;
  --section-surface: #FFFFFF;
  --section-accent: var(--re-blue);
}

.theme-dark {
  --section-bg: var(--re-graphite);
  --section-text: var(--re-white);
  --section-muted: var(--re-steel);
  --section-border: var(--color-border-dark);
  --section-border-strong: var(--color-border-dark-strong);
  --section-surface: var(--re-surface);
  --section-accent: var(--re-signal-blue);
}