/* Design tokens — Offset Shore
   Source of truth for colour, type, spacing and motion. */

:root {
  /* Brand masters — exact values from the Offset Shore logo pack.
     Do not alter these three; everything below is derived from them. */
  --color-navy: #09172a;
  --color-orange: #e67426;
  --color-ink: #18191b;

  /* Derived from the masters, keeping the relationships the layout was built on. */
  --color-navy-alt: #0c1c3b; /* lifted navy — gradient end, marquee bed */
  --color-orange-dark: #c46320; /* 15% darker, button hover */
  --color-orange-tint: #fcf1e9; /* ~10% orange over white, card hover */

  /* Retired: the original design's #0D47A1 blue and #FFB100 amber are not in the
     brand pack. Both now resolve to brand colours so the page uses nothing else. */
  --color-band: var(--color-navy-alt);
  --color-accent-on-navy: var(--color-orange);

  --color-surface: #ffffff;
  --color-surface-muted: #f2f4f7;
  --color-border: #e4e7ec;
  --color-rule: #d7dce3;
  --color-footer: #060f1c;

  --color-text: #09172a;
  --color-text-body: #3d4657;
  --color-text-muted: #5b6472;

  /* Text on navy */
  --color-on-navy: #ffffff;
  --color-on-navy-body: #c7cedd;
  --color-on-navy-muted: #8b96ad;
  --color-on-navy-faint: #a9b3c7;
  --color-on-navy-soft: #b6bfd1;
  --color-on-navy-rule: rgba(255, 255, 255, 0.12);
  --color-footer-text: #8b96ad;
  --color-footer-legal: #5c6579;

  /* Typography — fluid within the handoff's fixed breakpoint values */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-hero: 32px;
  --text-h2: 27px;
  --text-h2-sm: 26px;
  --text-body: 15.5px;
  --text-kicker: 10.5px;

  /* Spacing */
  --space-section: 64px 20px;
  --space-hero: 110px 20px 56px;
  --space-capability: 48px 20px;
  --space-cta: 64px 20px;
  --space-footer: 56px 20px 0;
  --space-card: 24px 22px;
  --width-content: 1280px;
  --width-narrow: 900px;
  --width-measure: 720px;

  /* Layout */
  --nav-height: 86px;
  --nav-height-scrolled: 68px;

  /* Motion.
     --ease is for hover and colour only. Anything entering, exiting or changing
     size uses --ease-out, which starts fast so the change reads immediately. */
  --duration-instant: 100ms;
  --duration-press: 160ms;
  --duration-fast: 200ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-reveal: 600ms;
  --ease: ease;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* The nav shrinks 86px → 68px. Expressed as a scale so the change runs on the
     compositor instead of animating height. CSS cannot divide two lengths, so
     these are derived by hand from --nav-height / --nav-height-scrolled above:
       scale = 68 / 86            = 0.7907
       shift = (68 - 86) / 2      = -9px   (re-centres the row in the shorter bar)
     Update all four together if either height changes. */
  --nav-scale-scrolled: 0.7907;
  --nav-shift-scrolled: -9px;

  /* Translucent chrome. Content scrolls underneath rather than past an opaque bar. */
  --material-nav: rgba(9, 23, 42, 0.72);
  --material-blur: blur(20px) saturate(180%);

  /* Elevation — soft and colour-tinted, never neutral grey */
  --shadow-orange: 0 4px 14px rgba(230, 116, 38, 0.35);
  --shadow-orange-lg: 0 6px 20px rgba(230, 116, 38, 0.4);
  --shadow-media: 0 30px 60px rgba(0, 0, 0, 0.35);
  --shadow-nav: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* Tablet: 760–1023px */
@media (min-width: 760px) {
  :root {
    --text-hero: 42px;
    --text-h2: 32px;
    --text-h2-sm: 36px;
    --text-body: 16.5px;
    --text-kicker: 12.5px;

    --space-section: 84px 28px;
    --space-hero: 150px 28px 80px;
    --space-capability: 64px 32px;
    --space-cta: 100px 32px;
    --space-footer: 80px 32px 0;
    --space-card: 30px 32px;
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  :root {
    --text-hero: 56px;
    --text-h2: 38px;

    --space-section: 110px 32px;
    --space-hero: 180px 32px 110px;
  }
}