/* ============================================================
   tokens.css — Clayfield Seafood Markets design tokens
   Aesthetic: hand-lettered coastal market editorial.
   All colour in OKLCH. Neutrals tinted toward the brand hue.
   ============================================================ */

:root {
  /* ---- Parent / global palette ---- */
  --ink:        oklch(21% 0.018 205);   /* deep sea ink — primary text */
  --ink-soft:   oklch(34% 0.020 205);   /* secondary text on cream */
  --paper:      oklch(96% 0.013 92);    /* warm butcher-paper cream — dominant surface */
  --paper-deep: oklch(92% 0.020 90);    /* inset cream */
  --teal:       oklch(50% 0.085 200);   /* signature ocean petrol */
  --teal-deep:  oklch(33% 0.060 205);   /* deep teal section bg */
  --teal-ink:   oklch(27% 0.050 205);   /* darkest teal */
  --coral:      oklch(64% 0.190 33);    /* CTA — appetite + visibility */
  --coral-hot:  oklch(60% 0.210 32);    /* CTA hover */
  --sun:        oklch(82% 0.130 82);    /* small warm accent */

  /* ---- Sub-brand worlds (from the real logos) ---- */
  --bs-cobalt: oklch(42% 0.140 266);
  --bs-aqua:   oklch(73% 0.080 208);
  --bs-sun:    oklch(87% 0.160 96);

  --sg-red:    oklch(55% 0.200 27);
  --sg-red-deep: oklch(45% 0.170 28);
  --sg-yellow: oklch(85% 0.150 92);
  --sg-ink:    oklch(22% 0.020 60);

  --pd-forest: oklch(52% 0.140 146);
  --pd-forest-deep: oklch(40% 0.110 147);
  --pd-lime:   oklch(78% 0.160 130);
  --pd-cream:  oklch(97% 0.020 110);

  /* ---- Type ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-hand:    "Shantell Sans", "Comic Sans MS", cursive;

  /* Fluid type scale (≥1.25 ratio) */
  --text-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --text-sm:    clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --text-base:  clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  --text-lg:    clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --text-xl:    clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --display-md: clamp(2.6rem, 1.8rem + 3.6vw, 5rem);
  --display-lg: clamp(3.4rem, 2rem + 6vw, 7.5rem);
  --display-xl: clamp(4.2rem, 2.2rem + 9vw, 11rem);

  /* ---- Spacing rhythm ---- */
  --space-section: clamp(5rem, 3.5rem + 7vw, 11rem);
  --space-lg:      clamp(2rem, 1.4rem + 2.5vw, 4rem);
  --space-md:      clamp(1.2rem, 1rem + 1vw, 2rem);
  --gutter:        clamp(1.25rem, 0.8rem + 3vw, 4.5rem);
  --maxw:          1320px;

  /* ---- Form ---- */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 180ms;
  --dur:      360ms;
  --dur-slow: 700ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px oklch(21% 0.02 205 / 0.10);
  --shadow-md: 0 14px 40px oklch(21% 0.02 205 / 0.16);
  --shadow-lg: 0 30px 80px oklch(21% 0.02 205 / 0.28);
}