/* Spirit Sight marketing - design tokens.
   Colors mirror the product app (app/static/css/themes/default.css) so the
   website → demo → app feel like one brand. Type scale is enlarged for marketing. */

:root {
  /* Brand */
  --navy: #1B2A4A;
  --navy-light: #243556;
  --navy-dark: #131E36;
  --navy-deep: #0B1424;     /* near-black navy for premium dark sections */
  --amber: #C17817;
  --amber-light: #D4922E;
  --amber-dark: #A56510;
  --amber-bright: #ED9A1F;   /* punchier accent for a fresher, younger feel */
  --grad-amber: linear-gradient(135deg, #ED9A1F 0%, #C17817 100%);
  --grad-amber-soft: linear-gradient(135deg, #F0A638 0%, #C9801C 100%);
  --copper: #B87333;
  --oak: #8B6F47;

  /* Surfaces */
  --bg: #FFFFFF;
  --bg-2: #F8FAFC;
  --bg-3: #F1F5F9;
  --bg-inset: #E2E8F0;
  --bg-cream: #FDF8F3;
  --canvas: #F5EFE3;        /* matches the baked background of the iso illustrations */

  /* Text */
  --text: #0F172A;
  --text-2: #475569;
  --text-3: #64748B;
  --text-inverse: #FFFFFF;
  --text-on-navy: rgba(255, 255, 255, 0.82);
  --text-on-navy-dim: rgba(255, 255, 255, 0.58);

  /* Borders */
  --border: #D5DCE5;
  --border-2: #E2E8F0;
  --border-strong: #CBD5E1;

  /* Status */
  --success: #059669;
  --critical: #DC2626;
  --info: #2563EB;

  /* Shadows (premium, soft) */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --shadow-focus: 0 0 0 3px rgba(193, 120, 23, 0.22);
  /* Layered elevation for cards + product imagery */
  --shadow-card: 0 1px 2px rgba(19,30,54,0.04), 0 6px 16px rgba(19,30,54,0.06);
  --shadow-card-hover: 0 2px 4px rgba(19,30,54,0.05), 0 18px 36px -8px rgba(19,30,54,0.14);
  --shadow-elev: 0 2px 4px rgba(19,30,54,0.04), 0 14px 30px -8px rgba(19,30,54,0.12), 0 48px 80px -24px rgba(19,30,54,0.22);
  /* Glow backdrops */
  --glow-amber: rgba(193,120,23,0.20);
  --glow-amber-soft: rgba(212,146,46,0.14);
  --glow-navy: rgba(27,42,74,0.12);

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-accent: 'Darker Grotesque', 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: 2rem;       /* 32 */
  --fs-3xl: 2.75rem;    /* 44 */
  --fs-4xl: 3.5rem;     /* 56 */

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Layout */
  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 120px);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}