/* ==========================================================================
   Lux Lipo — design tokens
   Ink & Copper (DESIGN-SYSTEM §2.1, approved by Ronnie 15 Sept 2026).
   Every value here is --ll-*. Change a value here, never in a component file
   and never in the Bricks builder.

   Character pass 3 (theme 3.0.0): the cocoa / rose / sage palette is gone.
   The logo is a warm metal; on a neutral-warm ground the copper becomes the
   page's only colour and reads as metal. A warm-brown ground turned the two
   into one flat mass — that was the "too harsh" verdict on theme 2.1.0.
   ========================================================================== */

:root {
  /* ---- Colour — Ink & Copper ------------------------------------------- */
  --ll-cream:          #F6F3EE;   /* page ground */
  --ll-sand:           #EAE4DA;   /* alternate band, light photo shapes */
  --ll-sand-2:         #DCD4C7;   /* light photo shape, far stop */
  --ll-white:          #FFFFFF;   /* cards on cream */

  --ll-ink:            #1F1B18;   /* headings and body on light */
  --ll-ink-soft:       #5F574F;   /* secondary text, ledes, captions */

  --ll-espresso:       #211C18;   /* dark ground: header, hero, cost band, close, footer */
  --ll-espresso-glow:  #3A322C;   /* radial highlight inside dark bands */
  --ll-espresso-deep:  #141110;   /* radial edge, ticker, dark photo shapes */

  --ll-copper:         #C89066;   /* the accent — italic clause, eyebrows on dark, primary button */
  --ll-copper-light:   #E8CCAF;   /* italic line on dark over the glow, hover on dark */
  --ll-copper-deep:    #8C6142;   /* eyebrows, numerals and links ON CREAM (copper fails AA there) */
  --ll-copper-tint:    #EFE2D6;   /* chips, hover fills */

  --ll-rule:           rgba(31, 27, 24, .14);    /* hairlines on light */
  --ll-rule-dark:      rgba(246, 243, 238, .14); /* hairlines on dark */
  --ll-focus:          #C89066;                  /* focus ring, 2px / 3px offset */
  --ll-error:          #9B3D3D;

  /* The only atmosphere on a dark band. Nothing else — no grain, no drift. */
  --ll-dark-bg: radial-gradient(1200px 700px at 78% 30%,
                  var(--ll-espresso-glow) 0%,
                  var(--ll-espresso) 48%,
                  var(--ll-espresso-deep) 100%);

  /* Text on dark, at the two weights the mockups use. */
  --ll-on-dark:        var(--ll-cream);
  --ll-on-dark-soft:   rgba(246, 243, 238, .82);
  --ll-on-dark-mute:   rgba(246, 243, 238, .60);

  /* Semantic aliases — role first, hue second. */
  --ll-bg:             var(--ll-cream);
  --ll-bg-alt:         var(--ll-sand);
  --ll-surface:        var(--ll-white);
  --ll-text:           var(--ll-ink);
  --ll-text-soft:      var(--ll-ink-soft);
  --ll-link:           var(--ll-copper-deep);
  --ll-link-hover:     var(--ll-ink);
  --ll-border:         var(--ll-rule);
  --ll-primary:        var(--ll-copper);
  --ll-on-primary:     var(--ll-espresso-deep);

  /* ---- Type ------------------------------------------------------------ */
  --ll-display:      "Instrument Serif", Georgia, "Times New Roman", serif;
  --ll-body:         "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Legacy aliases so older component files keep resolving. */
  --ll-serif:        var(--ll-display);
  --ll-font:         var(--ll-body);
  --ll-font-heading: var(--ll-display);

  --ll-fs-body:  clamp(15px, .95rem + .2vw, 17px);
  --ll-fs-lede:  clamp(16px, 1rem + .3vw, 19px);
  --ll-fs-h1:    clamp(42px, 2.2rem + 3.4vw, 84px);
  --ll-fs-h1-lg: clamp(44px, 2.4rem + 3.9vw, 92px);   /* home hero */
  --ll-fs-h1-md: clamp(40px, 2.1rem + 2.6vw, 78px);   /* contact, gallery */
  --ll-fs-h1-sm: clamp(36px, 2rem + 1.8vw, 60px);     /* finance */
  --ll-fs-h2:    clamp(34px, 2rem + 1.8vw, 56px);
  --ll-fs-h3:    clamp(22px, 1.3rem + .4vw, 26px);

  /* The 11px floor (§8 HIG pass). Nothing on a phone renders below this. */
  --ll-fs-micro: 11px;

  --ll-tracking-eyebrow: .18em;
  --ll-tracking-btn:     .18em;
  --ll-tracking-heading: -.01em;

  --ll-lh-tight: .98;
  --ll-lh-snug:  1.1;
  --ll-lh-body:  1.6;

  /* ---- Space ----------------------------------------------------------- */
  --ll-s-1:  0.25rem;
  --ll-s-2:  0.5rem;
  --ll-s-3:  0.75rem;
  --ll-s-4:  1rem;
  --ll-s-5:  1.5rem;
  --ll-s-6:  2rem;
  --ll-s-7:  3rem;
  --ll-s-8:  4rem;
  --ll-s-9:  6rem;
  --ll-s-10: 8rem;

  /* The spacing scale (launch fix, 1 Oct). Five values, used everywhere:
     section padding · block to block · heading to body · card padding · tight.
     It replaced a 112px section padding that stacked to 224px of cream
     between two sections on every page. */
  --ll-space-section: clamp(44px, 5vw, 76px);
  --ll-space-block:   clamp(28px, 2.8vw, 40px);
  --ll-space-head:    clamp(16px, 1.6vw, 22px);
  /* Heading bottom → first body element, every section (3.0.13). One number,
     not five: it was 22, 40, 62, 80 and 124px depending on which margins
     happened to stack. 16px on phones, set in character.css. */
  --ll-space-h2body:  22px;
  --ll-space-card:    clamp(20px, 2vw, 28px);
  --ll-space-tight:   12px;
  --ll-measure:       68ch;
  --ll-section-y:    var(--ll-space-section);
  --ll-section-y-sm: var(--ll-space-section);

  /* ---- Layout ---------------------------------------------------------- */
  --ll-content: 1296px;
  --ll-gutter:  clamp(20px, 5vw, 72px);
  --ll-prose:   64ch;

  --ll-header-h:    88px;
  --ll-header-h-sm: 60px;

  /* ---- Shape ----------------------------------------------------------- */
  /* Buttons, cards, tags and tables are 2px. Chips are pills. Photo shapes
     take ONE 120px corner or a 150px arch; every other corner is square. */
  --ll-r:        2px;
  --ll-r-pill:   999px;
  --ll-r-corner: 120px;
  --ll-r-arch:   150px;

  /* ---- Depth ----------------------------------------------------------- */
  /* Two elevations, and nothing else on the site casts a shadow. The 1px
     hairline shadow from pass 1 is what made the build read as a Word
     document; it is deleted, not softened. */
  --ll-e1: 0 10px 30px rgba(31, 27, 24, .10);
  --ll-e2: 0 24px 60px rgba(31, 27, 24, .18);

  /* ---- Motion ---------------------------------------------------------- */
  --ll-ease:  cubic-bezier(.2, .7, .2, 1);
  --ll-reveal-duration: 800ms;
  --ll-reveal-distance: 20px;
  --ll-reveal-stagger:  80ms;
  --ll-hover: 350ms;
  --ll-color-transition: 200ms ease;

  /* ---- Z ---------------------------------------------------------------- */
  --ll-z-header:  20;
  --ll-z-jump:    15;
  --ll-z-rail:    30;
  --ll-z-object:  31;
  --ll-z-wand:    32;
  --ll-z-sticky:  40;
  --ll-z-drawer:  60;
  --ll-z-lightbox: 65;

  color-scheme: light;
}