/* ============================================================================
   Outback Marine Construction — design tokens
   ----------------------------------------------------------------------------
   Theme checkerboard, after emarat-realty: a section carries `.theme-light`
   and that class RE-DECLARES the custom properties. Nothing downstream ever
   hard-codes a colour, so the ground AND the accent invert together.

   DARK GROUND is derived from the approved hero frame
   (prototypes/genb-world/assets/reference/hero_FINAL.png), sampled:
       darkest  3% of pixels  #00032b
       darkest 10% of pixels  #000733
   lifted a little so 1px hairlines survive an sRGB 8-bit ground.

   LIGHT GROUND is a design choice (sand / linen). It is NOT measured off the
   hero — the hero has no sand in it. Its brightest 20% is #df9db9, a pink
   cloud, which is not a page ground.

   ACCENT is Outback's own cyan #0db1e2 and it is the only chroma on the page.
   On the light ground the same hue is deepened so body-size text on it clears
   4.5:1; see css/base.css for where each is used.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Header height, in one place. The hero copy sits top-left and offsets itself
     by this, so the two cannot drift apart. */
  --header-h:      88px;

  /* ---- dark ground (default) --------------------------------------------- */
  --bg:            #05091f;
  --bg-alt:        #0a1030;
  --fg:            #eef2f7;
  --muted:         #9fb0c4;
  --line:          rgba(255, 255, 255, 0.16);
  --line-soft:     rgba(255, 255, 255, 0.08);
  --accent:        #0db1e2;
  --accent-ink:    #05091f;          /* text that sits ON the accent */
  --accent-soft:   rgba(13, 177, 226, 0.18);
  --rope:          #eef2f7;          /* rope cord + knots inherit the fg */
  --scrim:         rgba(5, 9, 31, 0.62);

  /* ---- geometry ---------------------------------------------------------- */
  --radius:        8px;
  --max:           1400px;
  --stroke:        1px;

  /* ---- motion ------------------------------------------------------------ */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-emarat:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --state-ms:      250ms;            /* the universal 0.2 -> 1.0 opacity swap */

  /* ---- type -------------------------------------------------------------- */
  --font-display:  'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

.theme-light {
  --bg:            #efe9dd;
  --bg-alt:        #e4dccd;
  --fg:            #131a24;
  --muted:         #55606d;
  --line:          rgba(19, 26, 36, 0.16);
  --line-soft:     rgba(19, 26, 36, 0.08);
  --accent:        #05708f;
  --accent-ink:    #efe9dd;
  --accent-soft:   rgba(5, 112, 143, 0.14);
  --rope:          #131a24;
  --scrim:         rgba(239, 233, 221, 0.62);
}