/*
  Artie's South Shore Fish Market & Grill — Design Tokens
  Coastal palette + editorial type system, adapted from the Limon
  interaction/layout grammar (flat surfaces, near-zero radius, one loud
  accent, oversized tracked display type) into an original seafood-market
  identity: Atlantic navy, sea-glass, oyster white, sand, and a single
  flash of lobster coral.
*/

:root {
  /* ---------- Color: Coastal Palette ---------- */
  --navy-deep: #081620;      /* footer, deepest canvas */
  --navy: #0c202e;           /* primary dark canvas — hero, header-on-scroll, dark sections */
  --navy-raised: #132c3c;    /* cards/panels sitting on navy */
  --sea-glass: #3f7d78;      /* accent headings/links on light, secondary brand color */
  --sea-glass-deep: #2c5c58; /* hover state for sea-glass */
  --aqua-mist: #a9cfc9;      /* hairlines, muted dividers, quiet accents */
  --oyster-white: #faf6ee;   /* primary light section background */
  --sand: #f1e8d8;           /* secondary light surface / card background */
  --sand-deep: #e4d6bd;      /* borders/hover on sand */
  --coral: #ff5a3c;          /* the one loud accent — CTA fill, badges, ticker */
  --coral-deep: #e14526;     /* coral hover/active */
  --ice: #d7dedd;            /* hairline borders on light, steel-market texture */
  --white: #ffffff;
  --ink: #0c202e;            /* body text on light surfaces (= navy) */
  --cream-text: #faf6ee;     /* body text on dark surfaces (= oyster white) */

  /* Status colors for Today's Catch board */
  --status-available: #3f7d78;
  --status-limited: #c98a2c;
  --status-sold-out: #8a7f74;
  --status-market: #ff5a3c;

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-caption: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;        /* 15px */
  --text-body: 1.0625rem;      /* 17px */
  --text-lg: 1.25rem;          /* 20px */
  --text-xl: 1.625rem;         /* 26px */
  --text-2xl: 2.125rem;        /* 34px */
  --text-3xl: 2.875rem;        /* 46px */
  --text-4xl: 4rem;            /* 64px */
  --text-5xl: 5.5rem;          /* 88px */
  --text-6xl: 7.5rem;          /* 120px */

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* ---------- Spacing (4px base unit) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ---------- Shape ---------- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --page-max: 1360px;
  --page-pad: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: 88px;
  --header-h-scrolled: 72px;
  --sticky-bar-h: 64px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-med: 450ms;
  --dur-slow: 900ms;

  /* ---------- Elevation (used sparingly — system is mostly flat) ---------- */
  --shadow-card: 0 18px 40px -22px rgba(8, 22, 32, 0.35);
  --shadow-float: 0 10px 30px -10px rgba(8, 22, 32, 0.45);
}

@media (max-width: 720px) {
  :root {
    --text-3xl: 2.375rem;   /* 38px */
    --text-4xl: 3rem;       /* 48px */
    --text-5xl: 3.5rem;     /* 56px */
    --text-6xl: 4.25rem;    /* 68px */
    --header-h: 76px;
    --header-h-scrolled: 64px;
  }
}