/* ==========================================================================
   Design tokens
   Taken from the House of Krajkumar logo (marketing/brand/logo/):
     maroon #4A0811  - brand colour: buttons, footer band, logo
     gold   #BF9B5D  - the "K" monogram: hairlines, icons, small accents
     ivory  #EADABD  - the badge centre: warm page background tones
   Light mode mirrors the logo on white; dark mode mirrors the logo on
   maroon (gold buttons, ivory text).

   Shape system (one rule, used everywhere):
     - Buttons and chips are full pills.
     - Photos use a small 4px radius.
     - Feature photos (hero, wholesale) use the jharokha "arch" top.
   ========================================================================== */

/* Typography (chosen by the client from font-options, 2026-10-01):
   - Lora for display titles: a classic, sturdy serif that matches the
     lettering in the logo's wordmark. Set in spaced capitals for titles.
   - Jost, a Futura-style geometric sans (as Sabyasachi uses Futura), for
     navigation, labels and body text.
   Change both here; nothing else references font names. */
@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/lora.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/lora-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Colour: light mode */
  --color-bg: #fbf6ee;
  --color-surface: #fffcf7;
  --color-surface-tint: #f4e8e0; /* blush-tinted panel (wholesale, image wells) */
  --color-ink: #2b0c12; /* body text, a maroon-black */
  --color-ink-muted: #6b5156;
  --color-line: #e7dad0;
  --color-brand: #4a0811; /* logo maroon: primary buttons, active chips */
  --color-on-brand: #fbf6ee;
  --color-gold: #8a6630; /* gold dark enough for small text on ivory (AA) */
  --color-gold-soft: #bf9b5d; /* logo gold: hairlines and icons */
  --color-band: #4a0811; /* footer band, always the logo maroon */
  --color-on-band: #f3e6d0;
  --color-overlay: rgb(43 12 18 / 0.72);
  --shadow-soft: 0 18px 40px -24px rgb(74 8 17 / 0.4);

  /* Typography */
  --font-display: "Lora", "Iowan Old Style", Georgia, serif;
  --font-body: "Jost", "Futura", "Avenir Next", "Segoe UI", sans-serif;
  --tracking-caps: 0.16em; /* letter-spacing for uppercase titles and nav */

  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --text-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --text-hero: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --section-gap: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Layout */
  --container: 1320px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --header-height: 84px;
  --announcement-height: 36px;

  /* Shape */
  --radius-photo: 4px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px var(--radius-photo) var(--radius-photo);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.6s;

  /* Layers */
  --z-header: 10;
  --z-floating: 15;
  --z-skip-link: 20;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1c0a0e;
    --color-surface: #251015;
    --color-surface-tint: #2f141a;
    --color-ink: #f6ece0;
    --color-ink-muted: #c9b2b2;
    --color-line: #45232b;
    --color-brand: #cfae72; /* gold buttons, like the logo on maroon */
    --color-on-brand: #2b0a10;
    --color-gold: #d8b87c;
    --color-gold-soft: #bf9b5d;
    --color-band: #3d0710;
    --color-overlay: rgb(10 3 5 / 0.82);
    --shadow-soft: 0 18px 40px -24px rgb(0 0 0 / 0.75);
  }
}