/* ==========================================================
   KES Lookbook design tokens
   Edit colours, fonts and spacing here. Everything else reads from these.
   ========================================================== */

@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/LibreBaskerville-Variable.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/LibreBaskerville-Italic-Variable.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/fonts/LeagueSpartan-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/assets/fonts/NotoSans-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Brand colours (KES Secondary Standard, live website palette) */
  --kes-terracotta: #AE633F;
  --kes-espresso:   #56403B;
  --kes-black:      #000000;
  --kes-text:       #2B1F1E;
  --kes-cream:      #F7F1EC;
  --kes-blush:      #BE9182; /* logo colour, used sparingly */

  /* Supporting tints (derived from the brand colours above) */
  --kes-cream-deep:   #EFE4DA;
  --kes-sand:         #E3D3C6;
  --kes-white:        #FFFCFA;
  --kes-terracotta-d: #8F4F31; /* hover / pressed, AA on cream */
  --kes-muted:        #6E5A55; /* secondary text, AA on cream */
  --kes-line:         rgba(86, 64, 59, 0.16);

  /* Roles */
  --bg: var(--kes-cream);
  --surface: var(--kes-white);
  --text: var(--kes-text);
  --text-muted: var(--kes-muted);
  --heading: var(--kes-espresso);
  --accent: var(--kes-terracotta);
  --accent-strong: var(--kes-terracotta-d);
  --focus: var(--kes-terracotta);

  /* Type */
  --font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body: "League Spartan", "Noto Sans", system-ui, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-3xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --tracking-caps: 0.14em;

  /* Space, shape, motion */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --maxw: 1320px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(43, 31, 30, 0.06), 0 2px 8px rgba(43, 31, 30, 0.05);
  --shadow: 0 2px 6px rgba(43, 31, 30, 0.06), 0 12px 32px rgba(43, 31, 30, 0.10);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

@media (min-width: 720px) { :root { --gutter: max(32px, env(safe-area-inset-left), env(safe-area-inset-right)); } }
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }