/* ==========================================================================
   SAI CREATION, DESIGN TOKENS
   --------------------------------------------------------------------------
   Every visual decision on the site is driven by the variables in this file.
   To restyle the site (colors, type, spacing, motion), edit ONLY this file
   first; the rest of the CSS consumes these tokens.
   ========================================================================== */

:root {

  /* ---- Color: core palette (warm light / brass luxury) ----
     Base is now light. Sections that stay dark for drama (hero, lamp wall,
     factory band, footer, lightbox) re-scope these tokens back to dark
     below, see ".on-dark islands".                                        */
  --clr-bg:            #F7F1E6;   /* page background, warm ivory            */
  --clr-bg-soft:       #EFE6D4;   /* alternating section background         */
  --clr-surface:       #FCF9F1;   /* cards, panels                          */
  --clr-surface-hi:    #F5EEDF;   /* hovered / elevated surfaces            */
  --clr-line:          #E3D8C2;   /* hairline borders on light              */

  --clr-ink:           #241E15;   /* primary text on light                  */
  --clr-ink-soft:      #5A4F3D;   /* secondary text                         */
  --clr-ink-faint:     #8A7B62;   /* captions, meta, muted labels           */

  --clr-gold:          #B58A3F;   /* brand accent, brushed brass (on light)*/
  --clr-gold-hi:       #916A26;   /* deeper brass, hover/emphasis on light  */
  --clr-gold-deep:     #6F5020;   /* pressed / borders                      */

  --clr-cream:         #ECDFC8;   /* deeper warm band for section contrast  */
  --clr-cream-soft:    #E3D4B9;   /* warm band alt                          */
  --clr-ink-on-cream:  #241E15;   /* text on warm bands                     */

  /* ---- Color: functional ---- */
  --clr-success:       #7FA96B;
  --clr-error:         #C96B5E;

  /* ---- Typography ----
     Display: Fraunces (serif, editorial). Body/UI: Outfit (sans).          */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Outfit", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (min → max between 360px and 1440px viewports) */
  --fs-hero:    clamp(2.75rem, 1.2rem + 6.9vw,  7.25rem);  /* H1 hero      */
  --fs-h1:      clamp(2.4rem,  1.4rem + 4.4vw,  5.5rem);   /* page titles  */
  --fs-h2:      clamp(1.9rem,  1.2rem + 3vw,    3.75rem);  /* section      */
  --fs-h3:      clamp(1.35rem, 1.1rem + 1.1vw,  2rem);
  --fs-lead:    clamp(1.1rem,  1rem + 0.5vw,   1.35rem);   /* intro copy   */
  --fs-body:    clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --fs-small:   0.875rem;
  --fs-label:   0.72rem;                                    /* eyebrows    */

  --lh-tight:   1.12;
  --lh-snug:    1.2;
  --lh-body:    1.65;

  --ls-label:   0.22em;    /* letter-spacing for uppercase eyebrow labels  */
  --ls-wide:    0.08em;

  /* ---- Spacing ---- */
  --space-1:  0.375rem;
  --space-2:  0.75rem;
  --space-3:  1.25rem;
  --space-4:  2rem;
  --space-5:  3.25rem;
  --space-6:  5rem;
  --space-7:  8rem;
  --section-pad: clamp(4.5rem, 3rem + 8vw, 10rem);  /* vertical section rhythm */
  --gutter:      clamp(1.25rem, 4vw, 4rem);         /* page side padding       */
  --container:   90rem;                              /* max content width       */

  /* ---- Radii & borders ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* ---- Shadows / glows ---- */
  --shadow-card: 0 24px 60px -18px rgba(0, 0, 0, .55);
  --glow-gold:   0 0 60px -12px rgba(200, 161, 94, .45);

  /* ---- Motion ----
     Used by CSS transitions AND read by JS (main.js) for GSAP durations.  */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:   0.3s;
  --dur-med:    0.7s;
  --dur-slow:   1.2s;

  /* ---- Z-index ladder ---- */
  --z-nav:      100;
  --z-menu:     200;
  --z-lightbox: 300;
  --z-preload:  400;
}

/* ---- Dark "islands" -------------------------------------------------------
   Sections that stay dark for drama on the otherwise-light site. They restore
   the dark palette locally so every token-driven component inside them (text,
   borders, gold accents, buttons) renders correctly against the dark ground. */
.hero,
.site-header,
.marquee,
.craft,
.showcase .show-card,
.lampwall,
.site-footer,
.lightbox,
.page-hero,
.mobile-menu {
  --clr-bg:            #131009;
  --clr-bg-soft:       #1B1610;
  --clr-surface:       #221C14;
  --clr-surface-hi:    #2C251B;
  --clr-line:          #3A3123;
  --clr-ink:           #F3EADA;
  --clr-ink-soft:      #CDBFA6;
  --clr-ink-faint:     #B4A489;   /* lifted for readable labels/meta on dark */
  --clr-gold:          #C8A15E;
  --clr-gold-hi:       #E9CB8F;
  --clr-gold-deep:     #8F6C33;
}
/* Sections that had no background of their own (they leaned on the old dark
   page) need one explicitly now that the page ground is light. */
.craft, .marquee, .page-hero { background-color: var(--clr-bg); }