/* ============================================================
   VerdeSur Design System — Foundations
   colors_and_type.css
   Asociación Socio-Cultural VerdeSur Alcalá
   ------------------------------------------------------------
   Greens for growth & the environment, warmed by Andalusian
   sun (amber) and a coral note for inclusion. Humanist type:
   characterful display + highly legible body for accessibility.
   ============================================================ */

/* ---- Webfonts ---------------------------------------------------
   NOTE: the current verdesur.org runs on Elementor's default stack
   (~Roboto). This system intentionally upgrades to a warmer, more
   distinctive pairing: Bricolage Grotesque / Mulish / Space Mono.
   Loaded as a separate enqueued stylesheet from functions.php
   (vs_enqueue_assets → 'verdesur-fonts'), not via @import here, so
   the browser can fetch it in parallel instead of blocking on this
   file. See inc/setup.php.                                         */

:root {
  /* ============================================================
     COLOR — PRIMITIVES
     ============================================================ */

  /* Verde — primary forest-green scale (growth, environment) */
  --verde-50:  #EAF3EC;
  --verde-100: #CFE6D5;
  --verde-200: #A7D3B2;
  --verde-300: #74B98A;
  --verde-400: #46A066;
  --verde-500: #2F8F5B;   /* brand primary — fills, illustration */
  --verde-600: #1F7449;
  --verde-700: #175A39;   /* deep — interactive, AA on white     */
  --verde-800: #114328;
  --verde-900: #0C3220;   /* near-black green — section grounds   */

  /* Lima — citrus accent (youth energy, highlights on dark) */
  --lima-300: #E4F2A2;
  --lima-400: #D2E97B;
  --lima-500: #BFE055;    /* accent — underlines, dots, on green  */
  --lima-600: #A2C53A;

  /* Sol — Andalusian amber (warmth, secondary CTA, sun) */
  --sol-300: #FBD9A0;
  --sol-400: #F4B45E;
  --sol-500: #E89322;     /* warm accent                          */
  --sol-600: #C6760F;

  /* Coral — inclusion / diversity warmth (sparingly) */
  --coral-400: #F08A73;
  --coral-500: #E8654E;
  --coral-600: #C84A36;

  /* Cielo — teal, cool secondary for variety */
  --cielo-400: #4FC0B4;
  --cielo-500: #1FA89B;
  --cielo-600: #157E74;

  /* Warm neutral — sand / stone */
  --paper:        #FBFAF5;  /* page background                    */
  --surface:      #FFFFFF;  /* cards, raised surfaces             */
  --surface-alt:  #F2EEE2;  /* alternating sections, wells        */
  --sand:         #ECE6D6;  /* tags, subtle fills                 */
  --line:         #E5E0D2;  /* hairline borders                   */
  --line-strong:  #D2CBB8;  /* stronger dividers, input borders   */

  --ink:    #18241C;  /* headings — deep green-black              */
  --body:   #3C463F;  /* body copy                                */
  --muted:  #66726A;  /* secondary text, captions                 */
  --faint:  #97A09A;  /* placeholder, disabled                    */

  /* Status (kept green-family friendly) */
  --success: #1F7449;
  --warning: #C6760F;
  --danger:  #C84A36;
  --info:    #157E74;

  /* ============================================================
     COLOR — SEMANTIC ALIASES (use these in components)
     ============================================================ */
  --color-bg:            var(--paper);
  --color-surface:       var(--surface);
  --color-surface-alt:   var(--surface-alt);
  --color-border:        var(--line);
  --color-border-strong: var(--line-strong);

  --color-text:          var(--ink);
  --color-text-body:     var(--body);
  --color-text-muted:    var(--muted);
  --color-text-faint:    var(--faint);
  --color-text-invert:   #F4F8F1;

  --color-primary:        var(--verde-700);  /* buttons, links   */
  --color-primary-hover:  var(--verde-800);
  --color-primary-press:  var(--verde-900);
  --color-primary-soft:   var(--verde-50);   /* tinted surfaces  */
  --color-on-primary:     #FFFFFF;

  --color-brand:          var(--verde-500);  /* logo, illustration */
  --color-ground:         var(--verde-900);  /* dark section bg  */
  --color-on-ground:      #EAF3EC;

  --color-accent:         var(--lima-500);   /* highlight, on dark */
  --color-warm:           var(--sol-500);
  --color-coral:          var(--coral-500);
  --color-cielo:          var(--cielo-500);

  --color-focus:          var(--cielo-500);  /* visible focus ring */

  /* ============================================================
     TYPOGRAPHY — FAMILIES
     ============================================================ */
  --font-display: 'Bricolage Grotesque', 'Mulish', system-ui, sans-serif;
  --font-sans:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-extra:   800;  /* @kind font */

  /* ============================================================
     TYPOGRAPHY — TYPE SCALE (fluid, responsive)
     ============================================================ */
  --text-display: clamp(2.75rem, calc(1.6rem + 5.2vw), 5rem);   /* 44 → 80 */
  --text-h1:      clamp(2.25rem, calc(1.5rem + 3.2vw), 3.5rem);  /* 36 → 56 */
  --text-h2:      clamp(1.75rem, calc(1.25rem + 2vw), 2.5rem);   /* 28 → 40 */
  --text-h3:      clamp(1.375rem, calc(1.1rem + 1vw), 1.75rem);  /* 22 → 28 */
  --text-h4:      clamp(1.125rem, calc(1rem + 0.4vw), 1.3125rem);/* 18 → 21 */
  --text-lead:    clamp(1.125rem, calc(1rem + 0.5vw), 1.375rem); /* 18 → 22 */
  --text-body:    1.0625rem;   /* 17px — accessible default */
  --text-small:   0.9375rem;   /* 15px */
  --text-xs:      0.8125rem;   /* 13px */
  --text-eyebrow: 0.8125rem;   /* 13px, uppercase tracked */

  /* Line heights */
  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.2;   /* @kind font */
  --lh-normal:  1.5;   /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  /* Tracking */
  --tracking-tight:   -0.02em;  /* @kind font */
  --tracking-normal:  0;        /* @kind font */
  --tracking-wide:    0.04em;   /* @kind font */
  --tracking-eyebrow: 0.14em;   /* @kind font */

  /* ============================================================
     SPACING — 4px base scale
     ============================================================ */
  --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 */

  --container:   1200px;          /* @kind spacing */
  --container-narrow: 760px;      /* @kind spacing */
  --gutter: clamp(1.25rem, 5vw, 4rem);  /* @kind spacing */

  /* ============================================================
     RADII — soft, organic but grounded
     ============================================================ */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;   /* default card */
  --radius-lg:   24px;   /* large cards, media */
  --radius-xl:   32px;
  --radius-pill: 999px;  /* buttons, tags */

  /* ============================================================
     SHADOWS — soft, low, green-tinted (natural, not harsh)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(24, 36, 28, 0.06);
  --shadow-sm: 0 2px 8px rgba(24, 36, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(24, 36, 28, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 50, 32, 0.12);
  --shadow-ring: 0 0 0 3px rgba(31, 168, 155, 0.45); /* focus */

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur: 220ms;       /* @kind other */
  --dur-slow: 420ms;  /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply via classes (.h1, .lead…) or element selectors.
   ============================================================ */

.ds-display, .ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-family: var(--font-display);
  color: var(--color-text);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  margin: 0;
  text-wrap: balance;
}
.ds-display { font-size: var(--text-display); line-height: var(--lh-tight); font-weight: var(--fw-extra); }
.ds-h1 { font-size: var(--text-h1); }
.ds-h2 { font-size: var(--text-h2); }
.ds-h3 { font-size: var(--text-h3); letter-spacing: -0.01em; }
.ds-h4 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: 0; }

.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
  font-weight: var(--fw-regular);
  margin: 0;
  text-wrap: pretty;
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
  margin: 0;
  text-wrap: pretty;
}
.ds-small { font-size: var(--text-small); line-height: var(--lh-normal); color: var(--color-text-muted); font-family: var(--font-sans); }

.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}

.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

a.ds-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--lima-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
a.ds-link:hover { color: var(--color-primary-hover); }

/* Visible, accessible focus for any interactive element */
.ds-focusable:focus-visible,
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}