/* =========================================================================
   FerryHawk — design tokens
   The palette, the type ramp, the shape and depth scales. Split out of
   ferryhawk.css so /admin can share one palette without inheriting the
   public component layer: only six of admin's class names exist in that
   sheet and all six collide (its `header` is a centred 34px stack, and the
   shell is a reading column), which would wreck a wide operator console.

   Values come from the Lovable coastal-watch design system, which authors
   in oklch. Converting them to hex is what made the first pass an
   approximation rather than a match.
   ========================================================================= */

/* ---------- Typography ------------------------------------------------

   Self-hosted, and that is a constraint rather than a preference: the CSP
   in web.py sends `style-src 'self' 'unsafe-inline'` with no font-src, so
   default-src 'self' governs fonts and anything on fonts.googleapis.com is
   blocked outright. Serving from /static/fonts keeps the header untouched,
   which matters because TestSecurityHeaders pins it.

   These are the variable faces, not static cuts. The design needs Space
   Grotesk at 600 and 700 and DM Sans at 400/500/600/700 -- six static files
   against two variable ones, and the variable pair is the smaller download.

   Both are SIL OFL 1.1; the licences sit beside them in static/fonts/.
   -------------------------------------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/static/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/static/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand.

     Values are lifted verbatim from the Lovable design system
     (ferryhawk-coastal-watch, src/styles.css), which authors in oklch. The
     first pass hand-converted them to hex and drifted: --ocean shipped as
     #1f6feb, a vivid azure, where the design is a muted slate-blue. Keeping
     the source format is what makes the match exact rather than approximate. */
  --navy: oklch(0.27 0.062 250);
  --navy-foreground: oklch(0.97 0.01 220);
  --ocean: oklch(0.52 0.115 240);
  --seaglass: oklch(0.63 0.088 190);
  --seaglass-050: oklch(0.95 0.024 190);      /* Lovable --accent */
  --accent-foreground: oklch(0.33 0.06 210);
  --sand: oklch(0.955 0.014 85);

  /* Hover tiers. The design expresses the navy one as alpha over the ground
     (hover:bg-navy/90). An explicit step is used instead: alpha composites
     against whatever is behind the button, which is the warm ground in one
     place and a white card in another, so it is not actually one colour. A
     +0.05 lightness step lands within a hair of both and does not depend on
     what it sits on -- which also lets offline.html, which can only carry
     literals, name the same colour. */
  --navy-700: oklch(0.32 0.062 250);
  --ocean-700: oklch(0.45 0.115 240);

  /* Neutrals */
  --bg: oklch(0.985 0.008 85);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.95 0.012 240);         /* Lovable --secondary */
  --ink: oklch(0.28 0.035 250);
  /* Lovable writes body copy as text-foreground/75 and /85. This is that
     composite resolved against --bg, so it stays one solid colour that can
     sit on any of our surfaces without the alpha showing through. */
  --ink-2: oklch(0.46 0.028 250);
  --ink-3: oklch(0.5 0.025 250);              /* Lovable --muted-foreground */
  --line: oklch(0.9 0.012 240);
  --line-strong: oklch(0.88 0.014 240);       /* Lovable --input */
  --ring: var(--ocean);

  /* Status */
  --ok: oklch(0.48 0.11 155);                 /* Lovable --available */
  --ok-050: oklch(0.95 0.04 155);
  --warn: oklch(0.55 0.12 70);                /* Lovable --caution */
  --warn-050: oklch(0.96 0.04 80);
  --bad: oklch(0.5 0.16 25);                  /* Lovable --soldout */
  --bad-050: oklch(0.955 0.026 25);

  /* Derived tiers.

     The sheet previously inlined ~20 one-off hexes (var(--seaglass-edge), var(--seaglass-ink),
     var(--ok-edge) ...) for the borders and text that sit on the tint fills above.
     Every one was eyeballed against the retired palette, so they all skew
     against this one. Deriving them keeps a tint family in step with its
     base when the base moves. */
  --seaglass-100: oklch(0.91 0.035 190);      /* hover fill on --seaglass-050 */
  --seaglass-edge: oklch(0.86 0.04 190);      /* border on --seaglass-050 */
  --seaglass-link: oklch(0.47 0.075 185);
  --seaglass-ink: oklch(0.40 0.048 190);      /* text on --seaglass-050 */
  --seaglass-ink-deep: oklch(0.34 0.045 190);

  --ok-edge: oklch(0.86 0.06 155);
  --warn-edge: oklch(0.88 0.07 80);
  --warn-ink: oklch(0.40 0.09 70);
  --warn-ink-deep: oklch(0.34 0.08 70);
  --bad-edge: oklch(0.86 0.08 25);
  --bad-ink: oklch(0.42 0.14 25);

  --ocean-050: oklch(0.96 0.02 240);
  --ocean-edge: oklch(0.86 0.06 240);
  --surface-hover: oklch(0.985 0.004 240);

  /* Shape.

     The new ramp is added alongside the old --r-* names rather than
     redefining them: --r-lg is 16px here and 12px in the design, so
     repointing it in place would silently move a dozen components that
     nothing in this pass reviews. Components move to --rad-* deliberately;
     the legacy names are deleted once nothing references them. */
  --radius: 12px;
  --rad-xs: 4px;
  --rad-sm: 8px;
  --rad-md: 10px;
  --rad-lg: 12px;
  --rad-xl: 16px;
  --rad-2xl: 20px;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;

  --shadow-card: 0 1px 2px oklch(0.28 0.06 250 / .06), 0 8px 24px -12px oklch(0.28 0.06 250 / .18);
  --shadow-lift: 0 2px 4px oklch(0.28 0.06 250 / .06), 0 18px 40px -18px oklch(0.28 0.06 250 / .28);
  --shadow: var(--shadow-card);

  --measure: 68ch;
  --page: 1152px;        /* max-w-6xl -- home and the chrome */
  --page-4xl: 896px;     /* max-w-4xl -- route-page heroes */
  --page-3xl: 768px;     /* max-w-3xl -- long-form bodies */

  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font);
}