/*! Rail design system 1.0.0 (2026-10-23). Tokens: every value the components read.
   Light on :root. Dark follows the visitor's system preference unless the page sets
   data-theme="light" or data-theme="dark" on <html>. */

:root {
  color-scheme: light;

  /* Surfaces */
  --rl-canvas: #f6f7f9;
  --rl-surface: #ffffff;
  --rl-well: #edf0f4;
  --rl-code-bg: #f2f4f7;

  /* Text */
  --rl-ink: #0d121a;
  --rl-body: #283140;
  --rl-muted: #434d5f;

  /* Lines */
  --rl-hair: #dde2e9;
  --rl-hair-strong: #c0c7d2;
  --rl-line-control: #78839a;

  /* Accent: cobalt */
  --rl-accent: #1a56c4;
  --rl-accent-strong: #1546a3;
  --rl-accent-soft: #e8effc;
  --rl-accent-ink: #ffffff;

  /* Primary button */
  --rl-btn: #1a56c4;
  --rl-btn-hover: #1546a3;
  --rl-btn-ink: #ffffff;

  /* Status */
  --rl-ok: #11683b;
  --rl-ok-soft: #e2f3e9;
  --rl-warn: #7f4c00;
  --rl-warn-soft: #faefda;
  --rl-danger: #b0241c;
  --rl-danger-soft: #fdeceb;

  /* Code */
  --rl-code-ink: #1d2634;
  --rl-code-comment: #465065;
  --rl-code-string: #0b5830;
  --rl-code-keyword: #1546a3;

  /* Deep band (full-bleed contrast section), same in both themes except its base */
  --rl-deep: #0e1521;
  --rl-deep-surface: #162030;
  --rl-deep-hair: #263246;
  --rl-deep-ink: #f3f6fb;
  --rl-deep-body: #cdd5e1;
  --rl-deep-muted: #a9b4c5;
  --rl-deep-accent: #93b6ff;
  --rl-deep-btn: #93b6ff;
  --rl-deep-btn-ink: #0b1220;
  --rl-deep-line-control: #6d7a90;
  --rl-deep-string: #86e0ad;

  /* Focus */
  --rl-focus: #1a56c4;

  /* Elevation (windows and menus only; cards stay flat) */
  --rl-shadow-window: 0 1px 0 var(--rl-hair), 0 32px 64px -40px rgba(13, 18, 26, 0.38);
  --rl-shadow-menu: 0 12px 32px -12px rgba(13, 18, 26, 0.28);

  /* Type */
  --rl-font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --rl-font-mono: "Geist Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
  --rl-fs-1: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);       /* 32 to 56: page title */
  --rl-fs-2: clamp(1.875rem, 1.45rem + 1.6vw, 2.5rem);  /* 30 to 40: section title */
  --rl-fs-3: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);    /* 24 to 28: price, panel title */
  --rl-fs-4: 1.3125rem;                                  /* 21: card and feature title */
  --rl-fs-5: 1.125rem;                                   /* 18: lede, section intro */
  --rl-fs-6: 1rem;                                       /* 16: body */
  --rl-fs-7: 0.875rem;                                   /* 14: meta, table, chips */
  --rl-fs-8: 0.75rem;                                    /* 12: captions, mono labels */
  --rl-fs-prose-sm: 0.875rem;                            /* 14: short supporting prose; 16 on phones */
  --rl-lh-display: 1.06;
  --rl-lh-heading: 1.14;
  --rl-lh-snug: 1.35;
  --rl-lh-body: 1.65;
  --rl-track-display: -0.032em;
  --rl-track-heading: -0.022em;
  --rl-weight-regular: 400;
  --rl-weight-medium: 500;
  --rl-weight-semibold: 600;

  /* Space: 4px base */
  --rl-space-1: 4px;
  --rl-space-2: 8px;
  --rl-space-3: 12px;
  --rl-space-4: 16px;
  --rl-space-5: 24px;
  --rl-space-6: 32px;
  --rl-space-7: 48px;
  --rl-space-8: 64px;
  --rl-space-9: 96px;
  --rl-space-10: 128px;
  --rl-section-pad: clamp(4.5rem, 3.6rem + 3vw, 6rem);  /* 72 to 96 */

  /* Shape */
  --rl-radius-btn: 6px;
  --rl-radius-input: 6px;
  --rl-radius-tile: 8px;
  --rl-radius-panel: 10px;
  --rl-radius-card: 12px;
  --rl-radius-window: 12px;
  --rl-radius-inline: 4px;
  --rl-radius-pill: 999px;

  /* Layout: content width, gutter inside the rails, and the rail position */
  --rl-content: 1200px;
  --rl-narrow: 760px;
  --rl-gutter: 48px;
  --rl-rail: max(12px, calc(50% - var(--rl-content) / 2 - var(--rl-gutter)));
  --rl-nav-h: 64px;
  --rl-stage-h: 460px;

  /* Motion */
  --rl-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --rl-dur-fast: 160ms;
  --rl-dur: 220ms;
  --rl-dur-reveal: 800ms;
}

@media (max-width: 760px) {
  :root {
    --rl-gutter: 24px;
    --rl-stage-h: 360px;
  }
}

@media (max-width: 640px) {
  :root {
    --rl-fs-prose-sm: 1rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rl-canvas: #0b0e13;
    --rl-surface: #12161d;
    --rl-well: #181d26;
    --rl-code-bg: #0f1319;
    --rl-ink: #f2f5f9;
    --rl-body: #d3d9e2;
    --rl-muted: #abb4c2;
    --rl-hair: #222934;
    --rl-hair-strong: #384151;
    --rl-line-control: #6e798b;
    --rl-accent: #6b9bf5;
    --rl-accent-strong: #93b6ff;
    --rl-accent-soft: #16233b;
    --rl-accent-ink: #0b0e13;
    --rl-btn: #6b9bf5;
    --rl-btn-hover: #8fb2fb;
    --rl-btn-ink: #0b0e13;
    --rl-ok: #62d398;
    --rl-ok-soft: #10261b;
    --rl-warn: #f1b95e;
    --rl-warn-soft: #2a200d;
    --rl-danger: #ff8d82;
    --rl-danger-soft: #2f1513;
    --rl-code-ink: #dfe5ee;
    --rl-code-comment: #9aa4b5;
    --rl-code-string: #7fdca6;
    --rl-code-keyword: #93b6ff;
    --rl-deep: #111a28;
    --rl-deep-surface: #182233;
    --rl-deep-hair: #2a364a;
    --rl-focus: #93b6ff;
    --rl-shadow-window: 0 1px 0 var(--rl-hair), 0 32px 64px -40px rgba(0, 0, 0, 0.7);
    --rl-shadow-menu: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --rl-canvas: #0b0e13;
  --rl-surface: #12161d;
  --rl-well: #181d26;
  --rl-code-bg: #0f1319;
  --rl-ink: #f2f5f9;
  --rl-body: #d3d9e2;
  --rl-muted: #abb4c2;
  --rl-hair: #222934;
  --rl-hair-strong: #384151;
  --rl-line-control: #6e798b;
  --rl-accent: #6b9bf5;
  --rl-accent-strong: #93b6ff;
  --rl-accent-soft: #16233b;
  --rl-accent-ink: #0b0e13;
  --rl-btn: #6b9bf5;
  --rl-btn-hover: #8fb2fb;
  --rl-btn-ink: #0b0e13;
  --rl-ok: #62d398;
  --rl-ok-soft: #10261b;
  --rl-warn: #f1b95e;
  --rl-warn-soft: #2a200d;
  --rl-danger: #ff8d82;
  --rl-danger-soft: #2f1513;
  --rl-code-ink: #dfe5ee;
  --rl-code-comment: #9aa4b5;
  --rl-code-string: #7fdca6;
  --rl-code-keyword: #93b6ff;
  --rl-deep: #111a28;
  --rl-deep-surface: #182233;
  --rl-deep-hair: #2a364a;
  --rl-focus: #93b6ff;
  --rl-shadow-window: 0 1px 0 var(--rl-hair), 0 32px 64px -40px rgba(0, 0, 0, 0.7);
  --rl-shadow-menu: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}