/* K&Co Lounge Collection, design tokens v1 (9 Oct 2026, background, chocolate split and Montserrat locked)
   Source of truth: DESIGN.md in this folder. Keep the two in step.
   Used by: the coming-soon page (Cloudflare), the Shopify theme (custom CSS + settings), email HTML.

   Shopify (Horizon/Dawn) mapping, set in Theme settings, not here:
   - Colour scheme 1 "Off-white": background --kc-ivory (#FCFCFA), text --kc-chocolate, solid button --kc-chocolate,
     button label --kc-ivory, outline button --kc-chocolate.
   - Colour scheme 2 "Stone": background --kc-stone, rest as scheme 1. Used for one or two sections only.
   - Colour scheme 3 "Chocolate": background --kc-chocolate-deep (#3D2C24), text --kc-ivory, solid button --kc-ivory,
     button label --kc-chocolate.
   - Fonts: headings Playfair Display Regular, body Montserrat Regular (locked 9 Oct, replaced Jost), both from Shopify's
     own font library, so nothing is uploaded.
   - Buttons and inputs: corner radius 4px. Cards and images square. Shadows off.

   Email (Omnisend custom HTML): web fonts only show in Apple Mail and some others, so always write
   font-family with the fallbacks below, and inline the hex values (no CSS variables in email). */

:root {
  /* Colour: Kristy's */
  --kc-chocolate: #4B2E20;        /* Pantone 476 C: all text, buttons, links */
  --kc-chocolate-deep: #3D2C24;   /* packaging chocolate: big blocks (announcement, signup band, footer) and button hover */
  --kc-stone: #E9E2D5;            /* Pantone 7527 C: one or two whole stone sections per page, not every surface */
  --kc-taupe: #A79B8E;            /* dividers on light, muted text on chocolate only */
  --kc-oat: #E7E1D8;              /* product swatch only */

  /* Colour: added by Kosmo, flagged in DESIGN.md */
  --kc-ivory: #FCFCFA;            /* off-white page ground (was warm ivory #F8F4EE, changed 9 Oct so product colours stand out) */
  --kc-surface-light: #F2F1EC;    /* cards, panels, quiet surfaces */
  --kc-image-ground: #F1F0ED;     /* seamless background for product photos */
  --kc-taupe-deep: #6B5F55;       /* muted text and control outlines on light */
  --kc-error: #9A3A2B;
  --kc-error-on-dark: #E9B8AA;     /* error text on chocolate blocks */
  --kc-success: #4E5E43;
  --kc-accent: #F1E9DC;           /* warm ivory badge ground, chocolate text (locked 9 Oct) */
  --kc-accent-sale: #56695A;      /* eucalyptus, PARKED until Kristy agrees; sale-only if used */
  --kc-swatch-black: #1E1B19;     /* black colourway dot, until fabric photos exist */

  /* Roles */
  --kc-bg: var(--kc-ivory);
  --kc-surface: var(--kc-surface-light);
  --kc-block: var(--kc-chocolate-deep);   /* solid colour blocks */
  --kc-text: var(--kc-chocolate);
  --kc-text-muted: var(--kc-taupe-deep);
  --kc-primary: var(--kc-chocolate);
  --kc-primary-hover: var(--kc-chocolate-deep);
  --kc-on-primary: var(--kc-ivory);
  --kc-outline: var(--kc-taupe-deep);
  --kc-divider: var(--kc-taupe);
  --kc-focus: var(--kc-chocolate);

  /* Type */
  --kc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --kc-font-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --kc-display-xl: clamp(2.75rem, 1.6rem + 4.8vw, 4.5rem);
  --kc-display-lg: clamp(2.25rem, 1.45rem + 3.4vw, 3.5rem);
  --kc-headline-lg: clamp(1.875rem, 1.45rem + 1.8vw, 2.5rem);
  --kc-headline-md: clamp(1.625rem, 1.4rem + 1vw, 2rem);
  --kc-headline-sm: 1.5rem;
  --kc-title: 1.125rem;
  --kc-body-lg: 1.125rem;
  --kc-body-md: 1rem;
  --kc-body-sm: 0.875rem;
  --kc-label: 0.75rem;

  --kc-track-display: -0.02em;
  --kc-track-headline: -0.01em;
  --kc-track-body: 0;
  --kc-track-caps: 0.14em;
  --kc-leading-display: 1.05;
  --kc-leading-headline: 1.15;
  --kc-leading-body: 1.6;
  --kc-measure: 65ch;

  /* Space (4px base, in rem so it scales with the reader's text size) */
  --kc-space-3xs: 0.25rem;
  --kc-space-2xs: 0.5rem;
  --kc-space-xs: 0.75rem;
  --kc-space-sm: 1rem;
  --kc-space-md: 1.5rem;
  --kc-space-lg: 2rem;
  --kc-space-xl: 3rem;
  --kc-space-2xl: 4rem;
  --kc-space-3xl: 6rem;
  --kc-space-4xl: 8rem;
  --kc-gutter: 1.5rem;
  --kc-margin: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --kc-section: clamp(4.5rem, 2.8rem + 7vw, 8rem);
  --kc-max: 90rem;

  /* Shape */
  --kc-radius: 0;                 /* cards, images, panels */
  --kc-radius-control: 4px;       /* buttons, inputs, size boxes, badges (locked 9 Oct) */
  --kc-radius-full: 9999px;
  --kc-arch: 9999px 9999px 0 0;
  --kc-control-h: 3.25rem;
  --kc-pill-h: 2.75rem;

  /* Depth */
  --kc-shadow-drawer: 0 24px 64px -16px rgba(75, 46, 32, 0.22);
  --kc-scrim: rgba(61, 44, 36, 0.32);
  --kc-header-glass: rgba(252, 252, 250, 0.72);
  --kc-header-blur: 20px;

  /* Motion */
  --kc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --kc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --kc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --kc-dur-press: 120ms;
  --kc-dur-hover: 200ms;
  --kc-dur-ui: 240ms;
  --kc-dur-drawer-in: 360ms;
  --kc-dur-drawer-out: 280ms;
  --kc-dur-reveal: 700ms;
  --kc-stagger: 60ms;
  --kc-press-scale: 0.97;
}

@media (prefers-reduced-transparency: reduce) {
  :root { --kc-header-glass: var(--kc-ivory); --kc-header-blur: 0px; }
}

@media (prefers-contrast: more) {
  :root {
    --kc-header-glass: var(--kc-ivory);
    --kc-header-blur: 0px;
    --kc-divider: var(--kc-taupe-deep);
    --kc-text-muted: var(--kc-chocolate);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kc-press-scale: 1;
    --kc-dur-drawer-in: 200ms;
    --kc-dur-drawer-out: 160ms;
    --kc-dur-reveal: 200ms;
    --kc-stagger: 0ms;
  }
}