/* ============================================================
   NÚRIA BOLADERES — DESIGN TOKENS
   Single source of truth. Every component & page inherits from here.
   ============================================================ */

/* ---- Licensed brand fonts ----------------------------------
   These are commercial typefaces (not on Google Fonts). To activate
   them, place the .woff2 files in /assets/fonts/ with the names below.
   Until then the stacks below fall back to Playfair Display + Helvetica.
   local() lets a desktop-installed copy resolve without a file. */
@font-face{
  font-family:'Canela'; font-weight:300; font-style:normal; font-display:swap;
  src:local('Canela Light'),url('../assets/fonts/Canela-Light.woff2') format('woff2');
}
@font-face{
  font-family:'Canela'; font-weight:400; font-style:normal; font-display:swap;
  src:local('Canela'),url('../assets/fonts/Canela-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Canela'; font-weight:300; font-style:italic; font-display:swap;
  src:local('Canela Light Italic'),url('../assets/fonts/Canela-LightItalic.woff2') format('woff2');
}
@font-face{
  font-family:'Ivy Presto Display'; font-weight:300; font-style:normal; font-display:swap;
  src:local('Ivy Presto Display Light'),url('../assets/fonts/IvyPrestoDisplay-Light.woff2') format('woff2');
}
@font-face{
  font-family:'Suisse Int\'l'; font-weight:300; font-style:normal; font-display:swap;
  src:local('Suisse Intl Light'),url('../assets/fonts/SuisseIntl-Light.woff2') format('woff2');
}
@font-face{
  font-family:'Suisse Int\'l'; font-weight:400; font-style:normal; font-display:swap;
  src:local('Suisse Intl'),url('../assets/fonts/SuisseIntl-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Suisse Int\'l'; font-weight:500; font-style:normal; font-display:swap;
  src:local('Suisse Intl Medium'),url('../assets/fonts/SuisseIntl-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Suisse Int\'l'; font-weight:600; font-style:normal; font-display:swap;
  src:local('Suisse Intl SemiBold'),url('../assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2');
}

:root{

  /* ---------- 1. BRAND PALETTE (raw — straight from the moodboard) ---------- */
  --c-forest:#2F3D2E;        /* primary identity / architecture */
  --c-olive:#565B3A;         /* mid-tone green depth */
  --c-sage:#7A846E;          /* GREEN ACCENT — interactive / dividers */
  --c-charcoal:#2B2B2B;      /* deepest structure */
  --c-stone:#A49F94;         /* warm grey */
  --c-clay:#CDB7A6;          /* warm light surface */
  --c-linen:#E7E1D6;         /* light field / text on dark */
  --c-dusty-rose:#C49A8C;    /* WARM GRACE NOTE — sparing only */

  /* tonal extensions (derived, for surfaces & states) */
  --c-forest-900:#0E120D;
  --c-forest-800:#141A12;
  --c-forest-700:#1B231A;
  --c-forest-600:#232E20;
  --c-forest-500:#2F3D2E;
  --c-sage-600:#5E664F;      /* deep sage — pressed / emphasis */
  --c-linen-100:#F2ECE2;
  --c-linen-300:#E7E1D6;
  --c-clay-300:#DBC9B7;

  /* ---------- 2. SEMANTIC / ARCHITECTURE (dark, default) ---------- */
  --bg:           var(--c-forest-700);   /* page substrate */
  --bg-deep:      var(--c-forest-900);   /* darkest pockets */
  --surface:      rgba(231,225,214,.035);/* raised panel on dark */
  --surface-2:    rgba(231,225,214,.06); /* hover / nested panel */
  --ink:          var(--c-linen);        /* primary text */
  --ink-soft:     rgba(231,225,214,.64); /* secondary text */
  --ink-faint:    rgba(231,225,214,.40); /* captions, meta */
  --ink-ghost:    rgba(231,225,214,.22); /* disabled */
  --line:         rgba(231,225,214,.14); /* default border */
  --line-soft:    rgba(231,225,214,.08); /* hairline / nested */
  --accent:       var(--c-sage);         /* interactive accent — GREEN identity */
  --accent-strong:var(--c-sage-600);     /* pressed / deep emphasis */
  --accent-warm:  var(--c-dusty-rose);   /* warm grace note — use sparingly */
  --on-accent:    var(--c-forest-900);   /* text on accent fills */

  /* ---------- 3. STATUS (earthy, desaturated) ---------- */
  --success:      #66785A;  --success-bg:rgba(102,120,90,.16);
  --warning:      #B59A6A;  --warning-bg:rgba(181,154,106,.16);
  --error:        #A06054;  --error-bg:  rgba(160,96,84,.18);   /* muted brick — functional only */
  --info:         #6E8B8E;  --info-bg:   rgba(110,139,142,.16);

  /* ---------- 4. TYPOGRAPHY ----------
     Headlines: Canela (alt: Ivy Presto) — licensed, drop .woff2 in assets/fonts/.
     Body/UI:   Suisse Int’l (alt: Neue Montreal, Akkurat) — licensed.
     Until the licensed files are present, the stacks fall back to Playfair
     Display (editorial serif) and the Helvetica/Arial system stack — the
     closest faithful free stand-ins. See @font-face block below. */
  --font-display:'Canela','Ivy Presto Display','Playfair Display', Georgia, serif;
  --font-text:'Suisse Int\'l','Neue Montreal','Akkurat','Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* type scale (1.250 major-third, fluid where useful) */
  --fs-display: clamp(3.25rem, 8vw, 7rem);   /* 52 → 112  */
  --fs-h1:      clamp(2.5rem, 5.5vw, 4.5rem); /* 40 → 72  */
  --fs-h2:      clamp(2rem, 4vw, 3rem);       /* 32 → 48  */
  --fs-h3:      clamp(1.5rem, 2.6vw, 2rem);   /* 24 → 32  */
  --fs-h4:      1.5rem;     /* 24 */
  --fs-lead:    1.375rem;   /* 22 */
  --fs-body:    1.0625rem;  /* 17 */
  --fs-sm:      0.9375rem;  /* 15 */
  --fs-xs:      0.8125rem;  /* 13 */
  --fs-eyebrow: 0.75rem;    /* 12 */

  --lh-tight:1.04;
  --lh-snug:1.18;
  --lh-body:1.65;
  --lh-loose:1.8;

  --ls-display:-0.01em;
  --ls-body:0.005em;
  --ls-eyebrow:0.30em;
  --ls-label:0.16em;

  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semi:600;

  /* ---------- 5. SPACING (4px base) ---------- */
  --space-0:0;
  --space-1:0.25rem;  /* 4  */
  --space-2:0.5rem;   /* 8  */
  --space-3:0.75rem;  /* 12 */
  --space-4:1rem;     /* 16 */
  --space-5:1.5rem;   /* 24 */
  --space-6:2rem;     /* 32 */
  --space-7:3rem;     /* 48 */
  --space-8:4rem;     /* 64 */
  --space-9:6rem;     /* 96 */
  --space-10:8rem;    /* 128 */
  --section-y:clamp(5rem, 11vw, 9.5rem);
  --gutter:clamp(1.5rem, 6vw, 5.5rem);

  /* ---------- 6. LAYOUT / CONTAINERS ---------- */
  --container-narrow:680px;
  --container-standard:1080px;
  --container-wide:1320px;
  --grid-cols:12;
  --grid-gap:clamp(1rem, 2vw, 1.5rem);

  /* breakpoints (reference; used in media queries)
     sm 480 · md 768 · lg 1024 · xl 1280 */

  /* ---------- 7. RADIUS ---------- */
  --r-xs:2px;
  --r-sm:4px;
  --r-md:8px;
  --r-lg:14px;
  --r-xl:24px;
  --r-pill:999px;
  --r-circle:50%;

  /* ---------- 8. BORDERS ---------- */
  --bw:1px;
  --border:var(--bw) solid var(--line);
  --border-soft:var(--bw) solid var(--line-soft);
  --border-accent:var(--bw) solid var(--accent);

  /* ---------- 9. ELEVATION (soft, on dark) ---------- */
  --shadow-1:0 1px 2px rgba(0,0,0,.30);
  --shadow-2:0 8px 24px -8px rgba(0,0,0,.50);
  --shadow-3:0 24px 60px -16px rgba(0,0,0,.62);
  --glow-accent:0 0 0 1px rgba(122,132,110,.34), 0 12px 40px -12px rgba(122,132,110,.40);
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---------- 10. MOTION ---------- */
  --dur-instant:120ms;
  --dur-fast:220ms;
  --dur-base:400ms;
  --dur-slow:700ms;
  --dur-ambient:9s;          /* breath-paced atmosphere */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --ease-breath:cubic-bezier(.37,0,.63,1);

  /* ---------- 11. GRADIENTS & TEXTURE ---------- */
  --grad-substrate:linear-gradient(165deg,#1B231A 0%,#141A12 60%,#0E120D 100%);
  --grad-warmlight:radial-gradient(circle at 70% 20%, rgba(205,183,166,.20), transparent 60%);
  --grad-accent:linear-gradient(135deg,var(--c-sage),var(--c-olive));
  --grad-overlay:linear-gradient(180deg, transparent 35%, rgba(21,23,15,.88));
  --grain-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---------- 12. Z-INDEX ---------- */
  --z-base:1;
  --z-sticky:100;
  --z-nav:200;
  --z-overlay:900;
  --z-modal:1000;
  --z-toast:1100;
}

/* Optional LIGHT field (linen sections). Apply .on-linen to invert.
   The system is dark by default; light is the exception, used for
   warm, intimate sections. */
.on-linen{
  --bg:var(--c-linen);
  --bg-deep:var(--c-linen-100);
  --surface:rgba(48,59,42,.04);
  --surface-2:rgba(48,59,42,.07);
  --ink:var(--c-forest);
  --ink-soft:rgba(48,59,42,.70);
  --ink-faint:rgba(48,59,42,.50);
  --ink-ghost:rgba(48,59,42,.28);
  --line:rgba(48,59,42,.16);
  --line-soft:rgba(48,59,42,.09);
  --accent:var(--c-olive);
  --on-accent:var(--c-linen);
  background:var(--bg);
  color:var(--ink);
}