/* FAAJ Logistics design tokens. Every colour and font in site.css comes from here.
 * Brand anchors: navy #0d1b4b = oklch(24.5% 0.091 267) · orange #f47b20 = oklch(71% 0.175 51).
 * Contrast (WCAG): ink/paper 15.3 · muted/paper 6.1 · accent-text/paper 5.4 · accent/navy 6.0 · focus 3.9 on both.
 */
:root {
  /* light surfaces */
  --color-paper:        oklch(97.5% 0.006 260);
  --color-paper-2:      oklch(94%   0.012 260);
  --color-field:        oklch(99.3% 0.003 260);
  --color-ink:          oklch(24.5% 0.091 267);
  --color-ink-2:        oklch(40%   0.050 265);
  --color-muted:        oklch(48%   0.030 265);
  --color-rule:         oklch(86%   0.015 262);

  /* navy band (hero, page heads, footer) */
  --color-band:         oklch(24.5% 0.091 267);
  --color-band-2:       oklch(30%   0.090 267);
  --color-band-ink:     oklch(96%   0.010 260);
  --color-band-muted:   oklch(80%   0.030 262);
  --color-band-rule:    oklch(40%   0.070 266);

  /* accent: FAAJ orange, kept to buttons, route lines and small marks */
  --color-accent:       oklch(71%   0.175 51);
  --color-accent-hover: oklch(76%   0.160 55);
  --color-accent-ink:   var(--color-ink);
  --color-accent-text:  oklch(52%   0.150 48);
  --color-focus:        oklch(60%   0.190 47);
  --color-error:        oklch(50%   0.170 27);
  --color-shadow:       oklch(24.5% 0.091 267 / 0.12);
  --color-scrim:        oklch(24.5% 0.091 267 / 0.45);
  /* flat tint over the photo bands. 0.72 is the measured minimum (rendered page, brightest 5% of pixels behind
     each line) for white text >= 4.5:1 and the light-orange headline line >= 3:1; see the photo-contrast check */
  --color-hero-scrim:   oklch(24.5% 0.091 267 / 0.72);
  --color-shadow-card:  oklch(24.5% 0.091 267 / 0.18);
  /* floating WhatsApp button: deeper than the brand green so the white icon keeps 3.9:1 */
  --color-whatsapp:       oklch(58% 0.15 150);
  --color-whatsapp-hover: oklch(52% 0.15 150);
  --color-hero-scrim-light: oklch(24.5% 0.091 267 / 0.3);   /* photo side of the split hero */
  --color-hero-panel:       oklch(22% 0.09 267 / 0.88);      /* text side of the split hero */
  --color-why-scrim:    oklch(24.5% 0.091 267 / 0.72);
  /* destinations map */
  --color-map-sea:   oklch(22% 0.085 266);
  --color-map-land:  oklch(36% 0.11 262);
  --color-map-coast: oklch(46% 0.12 260);
  --color-map-label: oklch(66% 0.11 258);
  /* flag colours, only for the round country flags */
  --flag-red:    oklch(56.6% 0.215 25);
  --flag-yellow: oklch(90.1% 0.186 98);
  --flag-green:  oklch(48.5% 0.137 149);
  --flag-black:  oklch(19.1% 0.004 90);
  --flag-white:  oklch(99%   0.002 90);

  /* type */
  --font-display: "Figtree", "Segoe UI", sans-serif;
  --font-body:    "Figtree", "Segoe UI", sans-serif;

  --text-sm:        0.9375rem;
  --text-base:      1.125rem;
  --text-md:        1.3125rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  /* stepped at the layout breakpoints below rather than clamp(), so every size is a plain value */
  --text-2xl:       1.875rem;
  --text-display-s: 2.125rem;
  --text-display:   2.5rem;

  /* space (4 pt) */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-hero-end: 8rem;  /* hero bottom: room for the quote card to overlap */
  --page-max:    75rem;
  --page-gutter: 1rem;

  /* motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* shape */
  --radius:     6px;
  --radius-lg:  12px;
  /* shapes: seams rise to the right like the hero's edge; cards and panels carry one cut corner, a cargo tag */
  --slant:  1.25rem;  /* 2.5rem from 40rem, 3.75rem from 75rem */
  --stripe: 5px;
  --cut:    1rem;
  --cut-lg: 2rem;
  --tag:    polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  --tag-lg: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%);
  --outline-rule: drop-shadow(1px 0 0 var(--color-rule)) drop-shadow(-1px 0 0 var(--color-rule)) drop-shadow(0 1px 0 var(--color-rule)) drop-shadow(0 -1px 0 var(--color-rule));
  --outline-ink:  drop-shadow(1px 0 0 var(--color-ink)) drop-shadow(-1px 0 0 var(--color-ink)) drop-shadow(0 1px 0 var(--color-ink)) drop-shadow(0 -1px 0 var(--color-ink));
  --rule-hair:  1px;
  --rule-field: 1.5px;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-fab:      150;
  --z-sticky:   200;
  --z-skip:     300;  /* the skip link must paint above the sticky header */
}
@media (min-width: 40rem) {
  :root { --text-2xl: 2.125rem; --text-display-s: 2.5rem; --text-display: 3.25rem; --page-gutter: 2rem; --slant: 2.5rem; }
}
@media (min-width: 60rem) {
  :root { --text-2xl: 2.5rem; --text-display-s: 3.25rem; --text-display: 4.25rem; --page-gutter: 3rem; --space-hero-end: 6rem; }  /* short enough that the quote card shows on the first screen */
}
@media (min-width: 75rem) {
  :root { --text-display: 4.75rem; --slant: 3.75rem; }
}