/* ==========================================================================
   tokens.css — DESIGN TOKENS (single source of truth)
   Scala WJS · light & airy, brand-blue led. No green, no terracotta.
   Change a value here and the whole site follows. The other CSS files only
   use these variables (no raw hex values outside this file).
   Contrast (WCAG 2.1, measured):
     ink   #0E1A2E on white 17.4:1 · on mist #F3F7FD 16.2:1          (AAA)
     slate #3A475E on white  9.4:1 · on mist 8.7:1                    (AAA)
     blue-700 #1E56A8 on white 7.1:1  → small blue text (eyebrows, links)  (AAA)
     brand #286BCE on white 5.1:1 · white on brand 5.1:1 → buttons, large type (AA)
     white on blue-800 #1B4E9B 8.0:1 → the contact/valuation panel     (AAA)
   ========================================================================== */

/* --- Self-hosted fonts (no Google request = no third-party cookies / GDPR-friendly) --- */
/* Headings: Source Serif 4 (variable, optical sizes 8–60, wght 400–700). Chosen by the client
   2026-10-09 (font variant C). Upright only: the site uses NO italics. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../assets/fonts/SourceSerif4-variable.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../assets/fonts/Inter-variable.woff2") format("woff2")}

:root{
  /* ---- Brand blue scale (primary = #286BCE from the Scala logo) ---- */
  --c-brand:        #286BCE;   /* buttons, icons, blue heading accents, symbol */
  --c-brand-hover:  #2260BB;
  --c-blue-700:     #1E56A8;   /* small blue text: eyebrows, inline links (7.1:1) */
  --c-blue-800:     #1B4E9B;   /* contained blue panel (white text 8:1) */
  --c-blue-900:     #133A75;   /* panel hover / deep accents */
  --c-blue-300:     #9DBBEB;   /* decorative line art */
  --c-blue-200:     #CCDCF5;   /* outlines, big step numerals stroke ground */
  --c-blue-100:     #E6EEFB;   /* chips, featured row, card badges */
  --c-blue-50:      #F3F7FD;   /* "mist" section ground */

  /* ---- Neutrals ---- */
  --c-white:        #FFFFFF;
  --c-bg:           #FBFCFE;   /* page background, almost white */
  --c-mist-deep:    #E8EEF7;   /* footer ground */
  --c-ink:          #0E1A2E;   /* headings + body text */
  --c-slate:        #3A475E;   /* secondary text */
  --c-line:         #C3CFE2;   /* visible dividers / card borders */
  --c-line-soft:    #DFE6F1;   /* very light separators */
  --c-border-strong:#55617C;   /* dashed placeholder borders (5.7:1) */
  --c-note-bg:      #FFF6DA;   /* "a confirmar" notes: warm, readable, unmistakable */
  --c-note-ink:     #5C4300;   /* 8.9:1 on note bg */
  --c-note-line:    #D9B54A;
  --c-online:       #2FBF71;   /* contact-badge 'online' dot only (requested by client) */

  /* ---- Photo-placeholder tones (art-directed; replaced by real photos) ---- */
  --ph-1:#DCE7F8; --ph-2:#F6F9FE;                 /* daylight blue → white */
  --ph-warm-1:#ECE6DA; --ph-warm-2:#FAF8F3;       /* soft stone (portrait) */

  /* ---- Typography ---- */
  --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --weight-display:600;                              /* headings + emphasised words (no italics) */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fs-eyebrow:.9375rem;   /* 13.5px: site-wide minimum (90% scale) */
  --fs-small:1rem;   /* 14.4px */
  --fs-ui:1.0625rem;                                 /* 15.3px nav + buttons */
  --fs-body:clamp(1.1112rem,1.05rem + .3vw,1.1875rem);  /* 16px mobile → 17.1px desktop */
  --fs-lead:clamp(1.15rem,1.05rem + .5vw,1.375rem);  /* 16.6 → 19.8px */
  --fs-h3:clamp(1.45rem,1.25rem + .8vw,1.9rem);
  --fs-h2:clamp(2.25rem,1.5rem + 3vw,4.1rem);
  --fs-h1:clamp(2.6rem,1.3rem + 4.6vw,5.25rem);
  --fs-numeral:clamp(5.5rem,3rem + 9vw,10.5rem);
  --lh-tight:1.1; --lh-snug:1.2; --lh-body:1.7;
  --tracking-display:-.015em; --tracking-eyebrow:.16em; --tracking-ui:.01em;

  /* ---- Spacing (7.2px base) ---- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:6.5rem;
  --section-y:clamp(5rem,3.5rem + 6.5vw,9.5rem);
  --gutter:clamp(1.25rem,.5rem + 3.2vw,3rem);
  --container:1240px;

  /* ---- Shape & depth ---- */
  --radius-s:7.2px; --radius-m:14.4px; --radius-l:25.2px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(14,26,46,.05),0 9px 27px -14px rgba(14,26,46,.14);
  --shadow-2:0 2px 3.6px rgba(14,26,46,.05),0 27px 54px -30px rgba(27,78,155,.38);
  --shadow-frame:0 39.6px 81px -44px rgba(27,78,155,.45);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-fast:.25s; --dur-base:.5s; --dur-slow:.9s; --dur-hero:1.3s;
  --stagger:90ms;

  /* ---- Layers & header ---- */
  --z-float:40; --z-header:50; --z-menu:60; --z-skip:100;
  --header-h:79.2px; --header-h-small:61.2px;
}
@media (max-width:860px){ :root{ --header-h:64.8px; --header-h-small:55.8px } }