/**
 * Rocktomic design tokens — single source of truth.
 * Brand rails: navy/white primary, coral strictly for action. No teal.
 */
:root {
  /* Brand color */
  --rt-white: #ffffff;
  --rt-navy: #102846;
  --rt-cta: #ff5757;
  --rt-cta-alt: #ff5050;
  --rt-coral-soft: #ff8b8b;

  /* Derived neutrals (navy-tinted, no new hues) */
  --rt-navy-900: #0b1d33;
  --rt-navy-700: #1d3a5f;
  --rt-navy-500: #3d567a;
  --rt-ink: var(--rt-navy);
  --rt-ink-soft: #44597a;
  --rt-line: #d9e0ea;
  --rt-surface: #f4f7fb;
  --rt-surface-2: #e9eef6;
  --rt-coral-tint: #fff1f1;
  --rt-on-navy-soft: #b8c6da;

  /* Semantic */
  --rt-success: #1e7a4f;
  --rt-warn: #9a6a00;

  /* Earnings highlight — pastel green for the profit panel (Printify-style).
     Green family only; never teal (teal belongs to a sibling brand). */
  --rt-earn-bg-1: #cdf0d8;
  --rt-earn-bg-2: #aee4bf;
  --rt-earn-ink: #135c3b;

  /* Partner brand colors — used ONLY to tint third-party integration logos in
     the "Sell Everywhere" wall. Not part of the Rocktomic palette; never reuse
     for site UI. (Squarespace & Wix render in navy.) */
  --rt-brand-shopify: #5e8e3e;
  --rt-brand-tiktok: #010101;
  --rt-brand-amazon: #ff9900;
  --rt-brand-woo: #7f54b3;
  --rt-brand-walmart: #0071ce;

  /* Type — Inter variable if provided in assets/fonts, system fallback */
  --rt-font-sans: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --rt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Modular scale 1.25, base 1rem */
  --rt-text-xs: 0.8rem;
  --rt-text-sm: 0.9rem;
  --rt-text-base: 1rem;
  --rt-text-md: 1.25rem;
  --rt-text-lg: 1.563rem;
  --rt-text-xl: 1.953rem;
  --rt-text-2xl: 2.441rem;
  --rt-text-3xl: 3.052rem;
  --rt-text-hero: clamp(2.75rem, 6.5vw, 4.75rem);

  --rt-weight-body: 400;
  --rt-weight-medium: 550;
  --rt-weight-bold: 700;
  --rt-weight-heavy: 800;
  --rt-leading-tight: 1.12;
  --rt-leading-snug: 1.3;
  --rt-leading-body: 1.6;
  --rt-tracking-tight: -0.02em;

  /* Space scale */
  --rt-space-1: 0.25rem;
  --rt-space-2: 0.5rem;
  --rt-space-3: 0.75rem;
  --rt-space-4: 1rem;
  --rt-space-5: 1.5rem;
  --rt-space-6: 2rem;
  --rt-space-7: 3rem;
  --rt-space-8: 4rem;
  --rt-space-9: 6rem;
  --rt-section-y: clamp(4.5rem, 10vw, 7.5rem);

  /* Layout */
  --rt-container: 72rem;
  --rt-container-narrow: 46rem;
  --rt-container-wide: 84rem;
  --rt-gutter: clamp(1rem, 4vw, 2rem);

  /* Shape & depth */
  --rt-radius-sm: 6px;
  --rt-radius: 12px;
  --rt-radius-lg: 20px;
  --rt-radius-pill: 999px;
  --rt-shadow-sm: 0 1px 3px rgba(16, 40, 70, 0.1);
  --rt-shadow: 0 6px 24px rgba(16, 40, 70, 0.12);
  --rt-shadow-lg: 0 16px 48px rgba(16, 40, 70, 0.18);
  --rt-shadow-xl: 0 32px 80px rgba(16, 40, 70, 0.22);

  /* Motion — transform/opacity only */
  --rt-ease: cubic-bezier(0.22, 0.8, 0.36, 1);
  --rt-dur: 180ms;
  --rt-dur-slow: 320ms;

  /* Controls */
  --rt-tap-min: 44px;
  --rt-focus-ring: 0 0 0 3px rgba(255, 87, 87, 0.35);
}