/* =========================================================================
   SAGE & CLAY — design tokens              nail-salon-website-03
   =========================================================================
   This file is the ONLY place a colour, font or core measurement is defined.
   assets/css/main.css contains no hex values at all — restyle the whole
   site by editing the six BRAND values below, exactly like templates 01/02.

   Palette: "Sage & Clay" — alabaster canvas with a green undertone, deep
   pine ink, terracotta clay as the action colour, sage as the quiet accent.
   A light, botanical, editorial look: gallery mats, arches, serif italics.
   ========================================================================= */

:root {

  /* -----------------------------------------------------------------
     1. BRAND — the six switches. Change these, change everything.
     ----------------------------------------------------------------- */
  --brand-canvas:  #F6F3EC;   /* page background — warm alabaster        */
  --brand-paper:   #FEFDF9;   /* card / "gallery mat" white              */
  --brand-pine:    #22372B;   /* ink — deep pine green                   */
  --brand-clay:    #B85C38;   /* PRIMARY action — terracotta clay        */
  --brand-sage:    #7E8F6E;   /* SECONDARY accent — dried sage           */
  --brand-linen:   #EAE5D6;   /* washed section background — linen       */

  /* -----------------------------------------------------------------
     2. Derived colour roles
     ----------------------------------------------------------------- */
  --c-ink:         var(--brand-pine);
  --c-ink-soft:    #46564A;   /* secondary text on canvas                */
  --c-ink-faint:   #5A695C;   /* captions, fine print — AA (4.5:1+) on
                                 canvas, paper, linen and sage washes    */
  --c-clay:        var(--brand-clay);
  --c-clay-deep:   #96431F;   /* hover / pressed clay                    */
  --c-clay-wash:   #F3E2D8;   /* tinted chip / highlight background      */
  --c-sage:        var(--brand-sage);
  --c-sage-deep:   #55654A;   /* sage that passes AA as small text on
                                 canvas AND linen                        */
  --c-sage-wash:   #E7EADD;   /* pale sage panel background              */
  --c-canvas:      var(--brand-canvas);
  --c-paper:       var(--brand-paper);
  --c-linen:       var(--brand-linen);
  --c-deep:        #1B2A21;   /* footer / darkest panel                  */
  --c-deep-soft:   #A8B5A6;   /* muted text on the deep panel            */
  --c-deep-line:   #33453A;   /* hairlines on the deep panel             */
  --c-line:        #D9D2C0;   /* hairlines on canvas                     */
  --c-line-strong: #B9B19B;   /* emphasised hairlines                    */
  --c-white:       #FFFFFF;

  /* Status (open/closed pill only) */
  --c-open:        #3D6B49;
  --c-open-wash:   #E2EDE2;
  --c-closed:      #9C3D25;
  --c-closed-wash: #F4E0D8;

  /* Honesty-guard ribbon on placeholder content */
  --c-warn:        #755C15;
  --c-warn-wash:   #F5EAC9;

  /* -----------------------------------------------------------------
     3. Photo treatment — "framed print" look.
        Images get a warm, slightly faded film grade + a paper mat.
        (01 = full colour, 02 = duotone, 03 = warm film + gallery mat.)
     ----------------------------------------------------------------- */
  --photo-grade:   saturate(.9) sepia(.1) contrast(.97) brightness(1.02);
  --mat-pad:       clamp(.5rem, 1.2vw, .875rem);   /* the paper border  */
  --scrim-band:    linear-gradient(180deg, rgba(27,42,33,.62), rgba(27,42,33,.46));

  /* -----------------------------------------------------------------
     4. Type — Fraunces (soft editorial serif) + Figtree (humanist sans)
     ----------------------------------------------------------------- */
  --font-display:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:     "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.9rem, 7.2vw, 5.8rem);
  --fs-h1:      clamp(2.5rem, 5.4vw, 4.2rem);
  --fs-h2:      clamp(1.95rem, 3.8vw, 2.9rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.55rem);
  --fs-quote:   clamp(1.5rem, 3vw, 2.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-display: 1.04;
  --lh-tight:   1.15;
  --lh-body:    1.72;
  --ls-eyebrow: 0.26em;
  --ls-btn:     0.14em;

  /* -----------------------------------------------------------------
     5. Layout & shape
        Squared corners + arches — deliberately NOT the pill/round
        language of templates 01 and 02.
     ----------------------------------------------------------------- */
  --wrap:         1240px;
  --wrap-narrow:  820px;
  --gutter:       clamp(1.25rem, 4vw, 2.75rem);
  --section-y:    clamp(4.5rem, 9vw, 8rem);

  --radius-xs:    2px;      /* buttons, chips — near-square             */
  --radius:       10px;     /* mats and cards                           */
  --radius-arch:  999px 999px 10px 10px;   /* the signature arch mask   */

  --shadow-sm:    0 1px 4px rgba(34,55,43,.07);
  --shadow:       0 14px 40px -12px rgba(34,55,43,.18);
  --shadow-lg:    0 30px 70px -24px rgba(34,55,43,.28);

  --ease:         cubic-bezier(.25,.6,.3,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --dur:          .5s;
  --dur-fast:     .25s;

  --headbar-h:    76px;     /* sticky header bar (sans topline)         */
}

@media (max-width: 760px) {
  :root {
    --headbar-h: 64px;
  }
}

/* Motion off: everything still readable, nothing waits on an animation */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; --dur-fast: .001s; }
}