/* ==========================================================================
   FKC Kitchens — Design Tokens

   Section 4B applied: VISUAL REFERENCE = modulux.wpthemeverse.com/home-image/,
   MODE = REPLACE. Palette, typography, spacing rhythm and component styling
   are taken from the reference (values measured from computed styles, not
   guessed — see docs/PHASE-4B-REFERENCE-TOKENS.md).

   Two owner-directed overrides of the reference:
     1. RADII STAY SHARP. The reference is round — 100px pills, 16px cards.
        This is a joinery brand and the edge is the product, so the near-sharp
        2/3/6/10px scale is kept.
     2. HEADER IS WHITE in both its normal and stuck states.

   Three contrast deviations, all forced (the reference itself fails AA):
     sage on cream 3.22:1, white on sage 3.54:1, sage on forest 3.36:1.
     Sage is therefore split into three roles — see --green / --green-ink /
     --green-bright below.

   Two colour contexts:
     :root        "the room"    — cream page, carrying FKC's daylight photography
     .interior    "inside"      — forest dark, used only where the design is
                                  literally showing the inside of something
   ========================================================================== */

:root {
  /* --- Colour: the room (reference values) ------------------------------ */
  --paper:            #F7F4ED;  /* page — reference body background */
  --paper-sunk:       #FFFFFF;  /* alternate band; the reference flips cream/white */
  --surface:          #FFFFFF;  /* raised card */
  --ink:              #2F3A2E;  /* forest — headings           10.8:1 on paper */
  --body:             #5F5B53;  /* taupe — body copy            6.2:1 on paper */
  --muted:            #6B675E;  /* captions, meta               5.1:1 on paper */
  --line:             rgba(47, 58, 46, 0.14);
  --line-strong:      rgba(47, 58, 46, 0.28);

  /* --- Colour: inside the cabinet --------------------------------------- */
  --interior:         #2F3A2E;  /* reference dark-section forest */
  --interior-soft:    #38452F;
  --interior-glow:    #4A5A3C;
  --topbar-bg:        #263025;  /* a touch deeper than the sections, so the
                                   strip reads as its own band */

  /* --- Accent -----------------------------------------------------------
     Sage is the reference's whole identity (417 text uses) but it is not a
     legible text colour. One value split into three roles. */
  --green:            #7C8F5A;  /* reference sage. UI ONLY — 3.2:1, never text */
  --green-ink:        #5E6E3E;  /* accent text          5.1:1 on paper  [deviation] */
  --green-bright:     #AECB90;  /* accent on dark       6.7:1 on forest [deviation] */
  --green-wash:       #EEF2E7;  /* faintest sage tint */
  --tint:             rgba(163, 177, 138, 0.2);  /* reference divider/shadow tint */

  /* --- Material accent --------------------------------------------------
     Copper is RETIRED under REPLACE — the reference has none. These aliases
     resolve to sage so no component breaks; they are not a second accent. */
  --copper:           var(--green);
  --copper-ink:       var(--green-ink);
  --copper-bright:    var(--green-bright);

  /* --- State ------------------------------------------------------------ */
  --success:          #5E6E3E;
  --error:            #A32C1B;
  --error-wash:       #FBEDEA;
  --focus:            #5E6E3E;

  /* --- Contextual aliases (components reference these, never raw colours) */
  --c-bg:             var(--paper);
  --c-bg-sunk:        var(--paper-sunk);
  --c-surface:        var(--surface);
  --c-heading:        var(--ink);
  --c-text:           var(--body);
  --c-muted:          var(--muted);
  --c-line:           var(--line);
  --c-accent:         var(--green-ink);
  --c-accent-ui:      var(--green);
  --c-metal:          var(--green-ink);
  --btn-bg:           var(--green-ink);
  --btn-fg:           #FFFFFF;
  --btn-alt-bg:       var(--ink);
  --btn-alt-fg:       #FFFFFF;

  /* --- Type (reference: Inria Serif 700 + Manrope 400/600/800) ---------- */
  --font-display: 'Inria Serif', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Manrope', system-ui, sans-serif;
  --display-weight: 700;
  --display-variation: normal;

  /* Reference scale. Desktop 62 / 46 / 22 / 18, mobile 24 / 18 / 13.
     Expressed fluidly between those measured endpoints rather than as fixed
     steps, so nothing needs a breakpoint override. */
  --fs-3xs:  0.75rem;                                   /* 12px */
  --fs-2xs:  0.8125rem;                                 /* 13px — button/label */
  --fs-xs:   0.8125rem;                                 /* 13px */
  --fs-sm:   0.875rem;                                  /* 14px */
  --fs-base: 1rem;                                      /* 16px — reference body */
  --fs-md:   1.125rem;                                  /* 18px */
  --fs-lg:   clamp(1.125rem, 1rem + 0.5vw,  1.375rem);  /* 18 → 22 card title */
  --fs-xl:   clamp(1.25rem,  1rem + 1.1vw,  1.75rem);   /* 20 → 28 */
  --fs-2xl:  clamp(1.5rem,   0.9rem + 2.6vw, 2.875rem); /* 24 → 46 section head */
  --fs-3xl:  clamp(1.75rem,  0.9rem + 3.6vw, 3.5rem);   /* 28 → 56 */
  --fs-4xl:  clamp(2rem,     0.8rem + 5.2vw, 3.875rem); /* 32 → 62 hero */

  /* Reference line-heights: 62/75.02 = 1.21 display, 16/25.92 = 1.62 body */
  --lh-tight:   1.14;
  --lh-display: 1.21;
  --lh-snug:    1.34;
  --lh-body:    1.62;
  --lh-loose:   1.8;

  /* The reference uses a FLAT -0.16px everywhere — display, body and caps
     alike. That single value is a large part of its texture. */
  --ls-display: -0.16px;
  --ls-tight:   -0.16px;
  --ls-normal:  -0.16px;
  --ls-wide:    0.04em;
  --ls-caps:    0.08em;               /* eyebrows: Manrope 800, uppercase */

  --measure:       68ch;
  --measure-tight: 46ch;

  /* --- Space (4px base) -------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-11: 10rem;

  /* Reference rhythm: median 345px between heading blocks on desktop. */
  --section-y:       clamp(3.5rem, 2.4rem + 5.4vw, 8rem);
  --section-y-tight: clamp(2.5rem, 2rem + 3vw, 5rem);
  --section-y-loose: clamp(5rem, 3.4rem + 8vw, 11rem);

  /* --- Layout ------------------------------------------------------------ */
  --container:        87.5rem;  /* 1400px — reference container */
  --container-wide:   93.75rem; /* 1500px */
  --container-narrow: 48rem;
  --gutter:           clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --header-h:         76px;
  --header-h-sm:      64px;

  /* --- Radius ------------------------------------------------------------
     OWNER OVERRIDE of the reference. Modulux is round (100px pills, 16px
     cards); this stays near-sharp. A joinery brand's edge is its product. */
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;            /* filter chips only */

  /* --- Elevation — sage-tinted, taken from the reference ------------------ */
  --sh-1: 0 2px 6px rgba(163, 177, 138, 0.16);
  --sh-2: 0 6px 14px rgba(163, 177, 138, 0.18);
  --sh-3: 0 10px 20px rgba(163, 177, 138, 0.2);      /* the reference's own */
  --sh-4: 0 16px 32px rgba(163, 177, 138, 0.2);      /* the reference's own */
  --sh-lift: 0 22px 44px rgba(163, 177, 138, 0.26);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* --- Motion ------------------------------------------------------------
     The reference's language is fade-and-rise on entry (fadeInUp x38). */
  --dur-instant: 90ms;
  --dur-fast:    180ms;
  --dur-base:    380ms;
  --dur-slow:    720ms;
  --dur-cinema:  1300ms;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drawer: cubic-bezier(0.16, 1, 0.3, 1);       /* soft-close hardware */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --stagger: 70ms;

  /* --- Depth (z) ---------------------------------------------------------- */
  --z-canvas:   0;
  --z-content:  1;
  --z-sticky:   50;
  --z-header:   100;
  --z-drawer:   200;
  --z-overlay:  300;
  --z-cursor:   400;
}

/* ==========================================================================
   .interior — the dark context (reference forest #2F3A2E).
   ========================================================================== */
.interior {
  --c-bg:        var(--interior);
  --c-bg-sunk:   #232C22;
  --c-surface:   var(--interior-soft);
  --c-heading:   #FFFFFF;
  --c-text:      #E4E2DA;
  --c-muted:     #B3B4A8;
  --c-line:      rgba(255, 255, 255, 0.16);
  --c-accent:    var(--green-bright);
  --c-accent-ui: var(--green-bright);
  --c-metal:     var(--green-bright);
  --btn-bg:      var(--green-bright);
  --btn-fg:      var(--interior);
  --btn-alt-bg:  transparent;
  --btn-alt-fg:  #FFFFFF;
  --focus:       var(--green-bright);
  --line:        rgba(255, 255, 255, 0.16);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.4);
  --sh-3: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sh-4: 0 20px 56px rgba(0, 0, 0, 0.5);
  --sh-lift: 0 28px 70px rgba(0, 0, 0, 0.55);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  background: var(--c-bg);
  /* Without this, an uncoloured heading inherits the light context's forest
     ink and disappears against the dark background. */
  color: var(--c-text);
}

/* ==========================================================================
   Reduced motion — collapse every duration at the token level so no component
   has to remember to opt in.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
    --dur-cinema:  1ms;
    --stagger:     0ms;
  }
}