/* ============================================================
   RGA&U — Design Tokens
   tokens.css · v01 · 2026-07-24
   RGA&U, S.A. de C.V. (Rincón Gallardo Arquitectura y Urbanismo)
   Desarrolladora de proyectos comerciales y de club social.

   Identity: MONOCHROME-FIRST. Near-black ink, mineral off-white
   grounds (cal / cantera), and ONE restrained accent — óxido
   #8C3B2B. Deliberately NOT gold and NOT navy: the group already
   runs ZLS (black + champagne), Zen Equestrian Club (dark + gold)
   and Elaa Biens (navy + gold). RGA&U differentiates through
   STRUCTURE — stroke weight, rules, grids, architectural
   whitespace — not through color.

   Layers, in order:
     1. Fonts
     2. Raw palette (never used directly in components)
     3. Semantic roles — light default
     4. Dark theme override (.dark  OR  [data-theme="dark"])
     5. Typography (families, scale, weights, tracking)
     6. Space, rule, radius, shadow, motion
     7. Layout
   Components consume ONLY the semantic roles: --bg, --surface,
   --band, --ink, --soft, --muted, --accent, --line, and the
   type roles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Questrial&family=Mulish:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- 2. RAW PALETTE ------------------------------------ */
  --rg-black:       #000000;   /* absolute black — the mark only */
  --rg-ink:         #111211;   /* neutral near-black — primary text */
  --rg-white:       #FFFFFF;

  --rg-cal:         #F5F4F1;   /* mineral off-white — page ground */
  --rg-cantera:     #EAE8E3;   /* raised surface / bands */
  --rg-cantera-dp:  #DAD7D0;   /* deeper mineral neutral */

  --rg-graphite:    #3A3B39;   /* soft ink — subheads, captions */
  --rg-concrete:    #65655F;   /* muted gray — metadata, secondary (AA on cal AND cantera) */
  --rg-line:        #DDDBD5;   /* hairline on light */

  --rg-oxide:       #8C3B2B;   /* THE accent — óxido */
  --rg-oxide-deep:  #6E2C20;   /* links, hover, accent-text on light */
  --rg-oxide-soft:  #B98476;   /* light accent, disabled, accent on dark */
  --rg-oxide-wash:  #F0E6E3;   /* faint wash — callouts, hover fills */

  /* dark grounds */
  --rg-basalt:      #0D0E0D;   /* deep neutral near-black ground */
  --rg-slate:       #171817;   /* raised surface on dark */
  --rg-ash:         #202220;   /* deeper band on dark */

  /* ---- 3. SEMANTIC ROLES — LIGHT (default) --------------- */
  --bg:            var(--rg-cal);
  --surface:       var(--rg-white);
  --band:          var(--rg-cantera);
  --band-deep:     var(--rg-cantera-dp);
  --ink:           var(--rg-ink);
  --soft:          var(--rg-graphite);
  --muted:         var(--rg-concrete);
  --accent:        var(--rg-oxide);
  --accent-deep:   var(--rg-oxide-deep);
  --accent-soft:   var(--rg-oxide-soft);
  --accent-wash:   var(--rg-oxide-wash);
  --line:          var(--rg-line);
  --on-accent:     var(--rg-white);    /* text sitting on an óxido fill */
  --on-ink:        var(--rg-cal);      /* text sitting on an ink fill */

  /* aliases — keep ZLS-derived markup working unchanged */
  --surface-alt:   var(--band);
  --hair:          var(--line);

  /* ---- 5. TYPOGRAPHY ------------------------------------- */
  --font-display:  'EB Garamond', 'Iowan Old Style', Georgia, serif;              /* editorial titles */
  --font-brand:    'Questrial', 'Century Gothic', 'Futura', sans-serif;           /* wordmark echo, eyebrows, labels, UI */
  --font-body:     'Mulish', ui-sans-serif, system-ui, -apple-system, sans-serif; /* running text */

  /* modular scale (~1.25) */
  --fs-eyebrow:  0.75rem;    /* 12px — tracked labels */
  --fs-caption:  0.8125rem;  /* 13px */
  --fs-small:    0.9375rem;  /* 15px */
  --fs-body:     1.0625rem;  /* 17px — base running text */
  --fs-lead:     1.25rem;    /* 20px — intros */
  --fs-h4:       1.375rem;
  --fs-h3:       1.75rem;
  --fs-h2:       clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  --fs-h1:       clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  --fs-display:  clamp(3rem, 1.8rem + 5vw, 5.25rem);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.08;
  --lh-snug:     1.28;
  --lh-body:     1.62;

  /* letter-spacing — the wordmark is wide-tracked; brand labels echo it */
  --track-mark:    0.34em;   /* the RGA&U wordmark itself */
  --track-brand:   0.26em;   /* eyebrows / kickers */
  --track-label:   0.14em;   /* nav, buttons, meta */
  --track-display: 0.005em;
  --track-tight:  -0.012em;

  /* ---- 6. SPACE / RULE / SHAPE / MOTION ------------------ */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --space-9: 10rem;

  /* rules carry the identity — three weights, echoing the mark's stroke */
  --rule-hair:   1px;
  --rule-med:    2px;
  --rule-heavy:  4px;
  --hair-w:      var(--rule-hair);   /* alias */

  /* colonnade: THE MARK — four bars, equal width, gaps = width, 78/100/100/82% */
  --colonnade-w:   2px;
  --colonnade-gap: 10px;

  --radius:      0px;   /* squared corners — architectural */
  --radius-soft: 2px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(17,18,17,.04), 0 8px 30px rgba(17,18,17,.05);
  --shadow-lift: 0 2px 6px rgba(17,18,17,.05), 0 24px 60px rgba(17,18,17,.09);

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur:       .45s;

  /* ---- 7. LAYOUT ----------------------------------------- */
  --measure:     66ch;      /* ideal reading width — never full-bleed body text */
  --page-max:    1180px;    /* content frame */
  --page-pad:    clamp(1.25rem, 4vw, 4rem);
  --sheet-pad:   26mm 24mm 22mm;

  color-scheme: light;
}

/* ---- 4. DARK THEME ------------------------------------- */
.dark,
[data-theme="dark"] {
  --bg:          var(--rg-basalt);
  --surface:     var(--rg-slate);
  --band:        var(--rg-ash);
  --band-deep:   #2A2C29;
  --ink:         #F2F1ED;
  --soft:        #C4C3BD;
  --muted:       #8A8A84;
  --accent:      var(--rg-oxide-soft);   /* óxido lifts one step on dark */
  --accent-deep: #CE9C90;
  --accent-soft: #6B382D;
  --accent-wash: rgba(185,132,118,.10);
  --line:        rgba(242,241,237,.16);
  --on-accent:   var(--rg-basalt);
  --on-ink:      var(--rg-basalt);

  --surface-alt: var(--band);
  --hair:        var(--line);

  color-scheme: dark;
}

/* ============================================================
   OPTIONAL BASE — thin reset + element defaults keyed to roles.
   Import tokens.css alone for variables only; these element
   rules only touch bare elements.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-3); max-width: var(--measure); text-wrap: pretty; }

a { color: var(--accent-deep); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--ink); }

hr { border: 0; border-top: var(--rule-hair) solid var(--line); margin: var(--space-5) 0; }

::selection { background: var(--accent-wash); color: var(--ink); }

/* ---- Brand utility classes (opt-in) -------------------- */
.rg-eyebrow {
  font-family: var(--font-brand);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-brand);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.rg-kicker {
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.rg-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}
.rg-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--soft);
}
.rg-wordmark {
  font-family: var(--font-brand);
  text-transform: uppercase;
  letter-spacing: var(--track-mark);
  color: var(--ink);
}
.rg-rule        { border: 0; border-top: var(--rule-hair) solid var(--line); }
.rg-rule-ink    { border: 0; border-top: var(--rule-med) solid var(--ink); width: 56px; }
.rg-rule-accent { border: 0; border-top: var(--rule-med) solid var(--accent); width: 56px; }

/* Colonnade — the RGA&U mark at UI scale. Use once per page, as the logo.
   <span class="rg-colonnade" aria-hidden="true"><i></i><i></i><i></i><i></i></span> */
.rg-colonnade { display: flex; align-items: flex-end; gap: var(--colonnade-gap); height: 40px; }
.rg-colonnade i { display: block; width: var(--colonnade-w); background: var(--ink); }
.rg-colonnade i:nth-child(1) { height: 78%; }
.rg-colonnade i:nth-child(2) { height: 100%; }
.rg-colonnade i:nth-child(3) { height: 100%; }
.rg-colonnade i:nth-child(4) { height: 82%; }