/* =============================================================================
   DESIGN TOKENS — Luisa Sandoval / Odisea
   -----------------------------------------------------------------------------
   THE SINGLE SWAP SURFACE. Nothing in the site hardcodes a colour, font, or
   size — everything references a token defined here. When the final logo and
   brand system arrive, only this file changes; every page updates with it.

   Maps 1:1 to the eventual Elementor Pro rebuild:
     • RAW RAMPS + SEMANTIC COLOURS  ->  Elementor "Global Colors"
     • TYPE tokens                    ->  Elementor "Global Fonts"
     • SPACING / LAYOUT tokens        ->  Elementor container spacing

   PALETTE DIRECTION (client-guided, 2026-07-16): warm earthy editorial —
   cream paper, espresso brown, with terracotta / olive / sage / slate as an
   extended earth palette. Inspired by Serenique + the shared earth-tone board,
   and convergent with the "daylight (cream/olive/terracotta) + night (slate)"
   registers already defined in the project's Creative Direction. Still a
   PLACEHOLDER system — final palette + fonts to be supplied by the client.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   PLACEHOLDER TYPEFACES — swap these + the two --font tokens to rebrand type.
   Display: classical old-style serif (Kinfolk / Serenique register)
   Body:    neutral humanist sans (Apple-like clarity)
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@400;500;600&display=swap');

:root {

  /* ==========================================================================
     1. RAW COLOUR RAMPS  (referenced only via the semantic tokens in §2)
        All hues drawn from the shared earth-tone board.
     ========================================================================== */

  /* === CLIENT PALETTE (exact hexes) ================================
     NEUTRALS (primary): E9D8C5 cream · 604234 espresso · B7A89B greige ·
     AA8863 camel · 475755 slate.   ACCENTS (1–2): A56A3E terracotta · 808A5D sage.
     ("#AC5DA" and "#BAZDON" from the list are not valid hex — treated as typos.) */

  /* Cream / paper (E9D8C5) */
  --sand-0:   #ffffff;
  --sand-50:  #f1e9dd;   /* page background — Crema Arena (official brand) */
  --sand-100: #e9d8c5;   /* PALETTE cream — tinted surface */
  --sand-200: #e2d0bb;   /* deeper cream surface */
  --sand-300: #cdb99c;   /* strong hairline / sand line */
  --sand-line:#ddccb4;   /* default hairline */
  --sand-muted-on-dark: #d7c8b2; /* muted text on dark */

  /* Espresso / brown (604234) */
  --brown-700: #604234;  /* PALETTE espresso — secondary text + dark bands */
  --brown-800: #533a2d;
  --brown-850: #3f2b25;  /* Marrón Chocolate — primary DARK band (official brand) */
  --brown-900: #33221d;  /* deeper chocolate */
  --brown-950: #241713;  /* deepest */
  --espresso:  #3f2b25;  /* Marrón Chocolate — primary body text (11:1 on cream) */

  /* Azul Piedra (dark register) — deep stone-blue for the 2nd dark tone (Agua) */
  --charcoal-900: #35494a;

  /* Accents + extended neutrals (OFFICIAL brand — El Camino) */
  --earth-terracotta: #bc6b4a;   /* Terracota · Fuego — warm accent */
  --earth-sage:       #8b8659;   /* Verde Oliva · Tierra — natural secondary */
  --earth-camel:      #aa8863;    /* neutral */
  --earth-greige:     #b7ab9b;    /* neutral */
  --earth-slate:      #42575d;    /* neutral (dark, cool) */
  --earth-olive:      #4c513a;    /* neutral (dark, warm-green) */
  --earth-taupe:      #8a7d6d;    /* neutral */
  --earth-charcoal:   #2d2d2d;    /* neutral (near-black) */

  /* ==========================================================================
     2. SEMANTIC COLOUR TOKENS  (what components reference)
        -> becomes Elementor Global Colors
     ========================================================================== */
  --color-bg:              var(--sand-50);
  --color-surface:         var(--sand-100);
  --color-surface-2:       var(--sand-200);
  --color-surface-sage:    #dfe3ce;             /* pale sage from 808A5D (accent) — light, keeps text contrast */
  --color-surface-deep:    var(--brown-850);    /* dark section (Odisea, dark bands) */
  --color-surface-deep-2:  var(--charcoal-900); /* second dark tone */

  --color-text:            var(--espresso);
  --color-text-secondary:  var(--brown-700);
  --color-text-muted:      #6e5844;             /* small labels — espresso-based, WCAG AA on cream */

  --color-text-on-dark:        var(--sand-50);
  --color-text-on-dark-muted:  var(--sand-muted-on-dark);

  --color-line:            var(--sand-line);
  --color-line-strong:     var(--sand-300);
  --color-line-on-dark:    rgba(255, 248, 236, 0.18);

  /* ==========================================================================
     BRAND PALETTE — El Camino (official, 2026-07). Named tokens.
     ========================================================================== */
  --terracota:      #bc6b4a;  /* Fuego  — warm accent */
  --terracota-ink:  #9a4a2c;  /* accessible terracotta for small text (5.1:1 on cream) */
  --olive:          #8b8659;  /* Tierra — natural secondary */
  --olive-ink:      #5f5b32;  /* accessible olive for small text (5.8:1) */
  --stone:          #6d8c8c;  /* Agua   — stone-blue secondary */
  --stone-ink:      #466a6a;  /* accessible stone-blue for small text (4.9:1) */
  --fog:            #c9c4ba;  /* Aire   — light neutral */
  --warm-grey:      #a99c8e;  /* supporting neutral */

  /* PER-PAGE ACCENT — overridden by body.accent-* (see end of file).
     Default = Terracota. Components read these, so each page recolours itself. */
  --page-accent:      var(--terracota);                                     /* pure palette swatch — fills, bands, buttons, dashes */
  --page-accent-soft: color-mix(in srgb, var(--terracota) 32%, var(--sand-50));
  --page-tint:        color-mix(in srgb, var(--terracota) 15%, var(--sand-50));
  --page-shade:       color-mix(in srgb, var(--terracota) 58%, #3f2b25);    /* darkened same-hue — readable colour bands */

  /* Accent — page-aware */
  --color-accent:          var(--page-accent);

  /* Interactive */
  --color-btn-bg:            var(--page-accent);
  --color-btn-bg-hover:      color-mix(in srgb, var(--terracota) 74%, #3f2b25);
  --color-btn-text:          #ffffff;
  --color-btn-bg-inverse:    var(--sand-50);
  --color-btn-inverse-hover: var(--sand-200);
  --color-btn-text-inverse:  var(--brown-900);
  --color-focus-ring:        var(--page-accent);

  /* Form fields */
  --color-field-bg:        #fffdf8;
  --color-field-border:    var(--sand-300);
  --color-field-text:      var(--espresso);

  /* ==========================================================================
     3. TYPOGRAPHY   -> --font-display / --font-body become Elementor Global Fonts
     ========================================================================== */
  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;                 /* PLACEHOLDER */
  --font-body:    'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* PLACEHOLDER */

  /* Editorial scale — H1 ~50–68px (present, not gigantic) */
  --fs-eyebrow:   0.78rem;
  --fs-meta:      0.9rem;
  --fs-body:      1.0625rem;
  --fs-body-lg:   clamp(1.15rem, 0.5vw + 1.03rem, 1.28rem);
  --fs-lede:      clamp(1.3rem, 0.9vw + 1.08rem, 1.6rem);
  --fs-h3:        clamp(1.2rem, 0.5vw + 1.05rem, 1.45rem);
  --fs-h2:        clamp(1.8rem, 2vw + 1.1rem, 2.75rem);   /* ~44px cap */
  --fs-h1:        clamp(2.5rem, 2.6vw + 1.5rem, 4.25rem); /* ~68px cap (≈50pt+) */
  --fs-display:   clamp(3rem, 4vw + 1.5rem, 4.75rem);     /* Odisea title */
  --fs-numeral:   clamp(2rem, 2vw + 1rem, 3rem);

  --lh-tight:     1.08;
  --lh-heading:   1.16;
  --lh-body:      1.72;
  --lh-lede:      1.5;

  --tracking-eyebrow: 0.14em;
  --tracking-wide:    0.18em;   /* Serenique-style tracked uppercase labels */
  --tracking-tight:  -0.015em;
  --tracking-normal:  0;

  --measure:        66ch;
  --measure-narrow: 42ch;

  /* ==========================================================================
     4. SPACING & LAYOUT
     ========================================================================== */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: 8rem;
  --sp-8: 11rem;

  --section-y:     clamp(4rem, 7vw, 7rem);
  --section-y-lg:  clamp(5rem, 9vw, 9.5rem);

  --container-max: 1320px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  /* ==========================================================================
     5. BORDERS, SHAPE, ELEVATION
        Soft editorial rounding on media (Serenique register); subtle rounding
        on controls. All tokenised so a future brand can resharpen in one place.
     ========================================================================== */
  --radius:        4px;    /* buttons, fields */
  --radius-md:     12px;
  --radius-media:  20px;   /* photography — soft editorial corners (Serenique) */
  --radius-lg:     26px;
  --radius-arch:   999px;  /* arched media tops (The Alchemist) */
  --hero-gap:      clamp(0.5rem, 1vw, 0.85rem);  /* inset frame around rounded hero / image-band cards */
  --border-hairline: 1px solid var(--color-line);
  --shadow: none;

  /* ==========================================================================
     6. MOTION  (restrained — hover micro-interactions only)
     ========================================================================== */
  --dur-fast:  180ms;
  --dur:       320ms;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);

  /* ==========================================================================
     7. Z-INDEX
     ========================================================================== */
  --z-header: 50;
  --z-skip:   100;
}

/* ============================================================================
   PER-PAGE ACCENT THEMES — add one class to <body> to recolour a whole page.
   Terracota (Fuego) · Verde Oliva (Tierra) · Azul Piedra (Agua).
   ========================================================================== */
/* NOTE: derived --color-* vars are re-declared here with CONCRETE brand tokens.
   (A :root var that references --page-* resolves at :root, so it would ignore the
   page override — re-declaring on the body class fixes the whole cascade.) */
/* Every derived value is a mix of the EXACT palette hex with cream or chocolate,
   so nothing off-palette is introduced. --page-accent is always the pure swatch. */
body.accent-terracota {
  --page-accent:      var(--terracota);                                        /* #BC6B4A exact */
  --page-accent-soft: color-mix(in srgb, var(--terracota) 32%, var(--sand-50));
  --page-tint:        color-mix(in srgb, var(--terracota) 15%, var(--sand-50));
  --page-shade:       color-mix(in srgb, var(--terracota) 58%, #3f2b25);        /* darkened same-hue for readable bands */
  --color-accent:     var(--terracota);
  --color-btn-bg:     var(--terracota);
  --color-btn-bg-hover: color-mix(in srgb, var(--terracota) 74%, #3f2b25);
  --color-focus-ring: var(--terracota);
}
body.accent-olive {
  --page-accent:      var(--olive);                                            /* #8B8659 exact */
  --page-accent-soft: color-mix(in srgb, var(--olive) 32%, var(--sand-50));
  --page-tint:        color-mix(in srgb, var(--olive) 15%, var(--sand-50));
  --page-shade:       color-mix(in srgb, var(--olive) 58%, #3f2b25);
  --color-accent:     var(--olive);
  --color-btn-bg:     var(--olive);
  --color-btn-bg-hover: color-mix(in srgb, var(--olive) 74%, #3f2b25);
  --color-focus-ring: var(--olive);
}
body.accent-stone {
  --page-accent:      var(--stone);                                            /* #6D8C8C exact */
  --page-accent-soft: color-mix(in srgb, var(--stone) 32%, var(--sand-50));
  --page-tint:        color-mix(in srgb, var(--stone) 15%, var(--sand-50));
  --page-shade:       color-mix(in srgb, var(--stone) 58%, #3f2b25);
  --color-accent:     var(--stone);
  --color-btn-bg:     var(--stone);
  --color-btn-bg-hover: color-mix(in srgb, var(--stone) 74%, #3f2b25);
  --color-focus-ring: var(--stone);
}