/* ==========================================================================
   variables.css — Sedos Kitchen design tokens
   Every colour, font, radius, shadow and spacing value used elsewhere comes
   from here, so the brand can be tuned in one file.
   ========================================================================== */
/* Self-hosted brand fonts (SIL Open Font License — see static/fonts/OFL-*.txt).
   Subset to Latin + punctuation; ₦ falls back to the system font automatically. */
@font-face {
  font-family: "Young Serif";
  src: url("../fonts/young-serif-regular.bdc431da410e.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-variable.2e16ba8bed17.ttf") format("truetype");
  font-weight: 300 900; font-style: normal; font-display: swap;
}

:root {
  /* Brand colour — sampled from the supplied logo (#075722) */
  --sk-green: #075722;
  --sk-green-600: #0B6A2C;
  --sk-green-hover: #054A1C;
  --sk-forest: #03321A;          /* dark sections: Event Catering, footer */
  --sk-forest-2: #0A4A26;
  --sk-okra: #A9C79A;            /* Food Bowls surface accent */
  --sk-okra-soft: #E3EEDB;
  --sk-gold: #E8A93A;            /* plantain gold — used sparingly */
  --sk-gold-soft: #FBEBC9;
  --sk-rice: #FCFBF6;            /* page background */
  --sk-calabash: #EFE4CC;        /* Homemade Meals surface */
  --sk-calabash-soft: #F7F1E3;
  --sk-ink: #17231B;             /* text */
  --sk-ink-2: #44524A;           /* secondary text */
  --sk-ink-3: #6E7B73;
  --sk-line: #DCD8C9;
  --sk-white: #FFFFFF;
  --sk-danger: #B3261E;
  --sk-danger-soft: #FBE9E7;

  /* Type */
  --sk-font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --sk-font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sk-text-xs: 0.8125rem;
  --sk-text-sm: 0.9375rem;
  --sk-text-base: 1.0625rem;
  --sk-text-lg: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
  --sk-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --sk-h3: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  --sk-h2: clamp(1.85rem, min(1.2rem + 1.9vw, 5.4vh), 2.75rem);
  --sk-h1: clamp(2.3rem, min(1.2rem + 3vw, 7.4vh), 4.25rem);
  /* Big headlines scale with the screen's width AND height, so they never push a hero off a laptop screen */
  --sk-display: clamp(2.5rem, min(4.2vw, 8.4vh), 5.25rem);   /* homepage + catering hero */

  /* Shape — radii follow hierarchy: sections > cards > controls */
  --sk-radius-xl: 40px;
  --sk-radius-lg: 24px;
  --sk-radius-md: 14px;
  --sk-radius-sm: 10px;
  --sk-radius-pill: 999px;

  /* Elevation — tinted green rather than grey */
  --sk-shadow-sm: 0 1px 2px rgba(3, 50, 26, 0.06), 0 2px 8px rgba(3, 50, 26, 0.05);
  --sk-shadow-md: 0 6px 24px rgba(3, 50, 26, 0.10);
  --sk-shadow-lg: 0 24px 60px rgba(3, 50, 26, 0.18);
  --sk-shadow-photo: 0 30px 80px -20px rgba(3, 50, 26, 0.45);

  /* ---------- Glass system ----------
     Three materials, each with a job:
     light  — cards and labels over food photography and light sections
     dark   — panels over dark-green sections and dark photo overlays
     tint   — green-tinted chips/labels sitting directly on photos
     Every glass surface = translucent fill + blur + hairline border + top highlight. */
  --sk-glass-blur-amt: 18px;
  --sk-glass-blur: blur(var(--sk-glass-blur-amt)) saturate(150%);
  --sk-glass-bg: rgba(252, 251, 246, 0.72);
  --sk-glass-light: linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(252, 251, 246, 0.62));
  --sk-glass-light-border: rgba(255, 255, 255, 0.7);
  --sk-glass-dark: linear-gradient(155deg, rgba(10, 74, 38, 0.62), rgba(3, 50, 26, 0.48));
  --sk-glass-dark-border: rgba(255, 255, 255, 0.16);
  --sk-glass-tint: linear-gradient(155deg, rgba(7, 87, 34, 0.55), rgba(3, 50, 26, 0.42));
  --sk-glass-border: rgba(255, 255, 255, 0.6);
  --sk-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --sk-glass-highlight-dark: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --sk-glass-shadow: 0 18px 50px rgba(3, 50, 26, 0.16), 0 2px 6px rgba(3, 50, 26, 0.06);

  /* Photo treatments */
  --sk-photo-shade: linear-gradient(180deg, rgba(3, 30, 15, 0) 35%, rgba(3, 30, 15, 0.72) 100%);
  --sk-photo-shade-side: linear-gradient(90deg, rgba(3, 30, 15, 0.82) 0%, rgba(3, 30, 15, 0.45) 45%, rgba(3, 30, 15, 0.05) 100%);

  /* Spacing */
  --sk-section-y: clamp(3rem, min(1.5rem + 3.5vw, 9vh), 5.5rem);
  /* Height available below the fixed navbar — large blocks are capped by it so each section fits the window */
  --sk-screen: calc(100vh - var(--sk-nav-h));
  --sk-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --sk-nav-h: 84px;

  /* Motion */
  --sk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sk-fast: 160ms;
  --sk-medium: 320ms;

  /* Bootstrap overrides so its components inherit the brand */
  --bs-body-font-family: var(--sk-font-body);
  --bs-body-color: var(--sk-ink);
  --bs-body-bg: var(--sk-rice);
  --bs-link-color: var(--sk-green);
  --bs-link-color-rgb: 7, 87, 34;
  --bs-link-hover-color: var(--sk-green-hover);
  --bs-primary: var(--sk-green);
  --bs-primary-rgb: 7, 87, 34;
  --bs-border-color: var(--sk-line);
  --bs-focus-ring-color: rgba(7, 87, 34, 0.3);
}

@supports (height: 100svh) {
  :root { --sk-screen: calc(100svh - var(--sk-nav-h)); }
}