/* Design tokens — values from design-handoff/README.md */

/* Size-adjusted local fallbacks keep line widths close to the web fonts,
   so text does not re-wrap (and shift layout) when the fonts arrive. */
@font-face {
  font-family: "Sofia Fallback";
  src: local("Arial Narrow"), local("ArialNarrow"), local("Arial");
  size-adjust: 62%;
  ascent-override: 150%;
  descent-override: 40%;
}
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 101%;
}

:root {
  /* Color — dark (near-black with a navy tint, easier on the eyes than pure black) */
  --c-night: #0B1420;
  --c-deep: #09111B;
  --c-surface: #101B29;
  --c-surface-2: #0F1A27;
  --c-line: #1C2A3A;
  --c-line-strong: #283A4D;
  --c-line-stage: #192636;
  --c-line-faint: #132030;
  --c-text: #F1F4F6;
  --c-text-body: #E9EDF1;
  --c-text-soft: #C3CCD4;
  --c-text-nav: #C5CED6;
  --c-muted: #8794A0;
  --c-cell-off: #223247;
  --c-hover: #152234;
  --c-step-hover: #19283A;
  --c-seg-on: #172A40;
  --c-disabled: #1E2D40;

  /* Color — light & accent */
  /* Easyride blues. Brand = fills (buttons, badges) with white text on top.
     Accent = the logo blue, for thin lines, links and focus rings on dark
     backgrounds, where the darker brand blue would be too faint (2:1). */
  --c-brand: #1D487C;
  --c-brand-hover: #2F6DBA; /* white text still 5.2:1 */
  --c-on-brand: #FFFFFF;
  --c-accent: #147AFF;
  --c-accent-hover: #5FA4FF;
  /* Link text on navy: the logo blue is ~4:1 there, this lighter blue passes 4.5:1. */
  --c-link: #5FA4FF;
  --c-link-hover: #8CC0FF;
  --c-fog: #E5E8E3;
  --c-ink: #10161B;
  --c-ink-soft: #3A4650;
  --c-paper: #FBFBF8;
  --c-paper-muted: #5B6772;
  --c-paper-rule: #B9C0C6;

  /* Lit gradients */
  --g-hero-text: linear-gradient(100deg, #F4F8FF 0%, #DDE9F8 38%, #BAC3CC 82%, #8E9AA5 100%);
  --g-hero-text-mobile: linear-gradient(170deg, #BAC3CC 0%, #DDE9F8 60%, #F4F8FF 100%);
  --g-wordmark: linear-gradient(0deg, #147AFF 0%, #8CC4FF 14%, #1660C4 48%, #131F2E 100%);
  --g-stage: linear-gradient(180deg, #070D16 0%, #09111B 70%, #0E1826 100%);
  --g-stage-floor: linear-gradient(180deg, #111D2B, #0C1622);
  /* Section backgrounds: a gentle left-to-right navy gradient */
  --g-night: linear-gradient(100deg, #0A121D 0%, #0C1726 60%, #0B1522 100%);
  --g-deep: linear-gradient(100deg, #08101A 0%, #0A1421 60%, #09121E 100%);
  --g-spot: linear-gradient(180deg, rgba(214,232,255,0.22) 0%, rgba(170,205,255,0.08) 60%, rgba(130,180,255,0) 100%);
  --g-floor-glow: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(150,195,255,0.20), rgba(150,195,255,0) 70%);
  --g-range-beam: linear-gradient(90deg, rgba(205,226,255,0.95) 0%, rgba(20,122,255,0.55) 55%, rgba(20,122,255,0) 100%);

  /* Type */
  --f-display: "Sofia Sans Extra Condensed", "Sofia Fallback", "Arial Narrow", sans-serif;
  --f-body: "Schibsted Grotesk", "Schibsted Fallback", system-ui, sans-serif;
  --fs-body: 17px;
  --fs-lead: 19px;
  --fs-small: 15px;
  --fs-caption: 14px;
  --fs-h1: clamp(60px, 8vw, 118px);
  --fs-h2: clamp(56px, 7vw, 100px);
  --fs-h3: 56px;
  --fs-price: 76px;

  /* Spacing & layout */
  --page-max: 1312px;
  --gutter: 64px;
  --section-y: 150px;
  --control-h: 58px;
  --tap: 44px;

  /* Shapes */
  --chamfer: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

@media (max-width: 900px) {
  :root {
    --fs-body: 16px;
    --fs-lead: 16px;
    --fs-h1: 58px;
    --fs-h2: 56px;
    --fs-h3: 46px;
    --fs-price: 64px;
    --gutter: 20px;
    --section-y: 80px;
    --control-h: 56px;
  }
}