/* =========================================================
   SIGNOLIA — Foundations
   Brand: Spanish-language platform for signage / visual
   communication professionals (rotulación y comunicación
   visual). Editorial-feel website with a podcast, news,
   training (Formación), events, premium "Connect" tier and
   a marketing section ("Anúnciate").
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND PALETTE (from official brand guide) ---------- */
  --signolia-nectarine:       #EF7F1A;  /* Retro Nectarine — primary */
  --signolia-myrtle:          #347778;  /* Myrtle Green — secondary  */
  --signolia-pale-grey:       #FEFEFE;  /* Pale Grey — surface       */

  /* Brand-derived shades observed in product (Figma) */
  --signolia-nectarine-dark:  #ED821E;
  --signolia-nectarine-soft:  #FE9700;
  --signolia-nectarine-tint:  #F8C89D;  /* gradient pair */
  --signolia-nectarine-deep:  #67370B;  /* gradient pair */

  --signolia-myrtle-deep:     #1A3D3E;  /* dark surface, footer-band */
  --signolia-myrtle-mid:      #3D7A7A;
  --signolia-myrtle-tint:     #A8C5C5;
  --signolia-myrtle-deepest:  #173334;  /* gradient pair */

  --signolia-plum:            #833766;  /* tertiary accent (pill tags) */
  --signolia-plum-alt:        #833965;

  /* Brand gradients (from brand guide) */
  --grad-nectarine:   linear-gradient(135deg, #EF7F1A 0%, #F8C89D 100%);
  --grad-myrtle:      linear-gradient(135deg, #347778 0%, #A8C5C5 100%);
  --grad-myrtle-dark: linear-gradient(135deg, #347778 0%, #173334 100%);
  --grad-nectarine-dark: linear-gradient(135deg, #EF7F1A 0%, #67370B 100%);

  /* ---------- NEUTRALS ---------- */
  --black:        #0C0B0B;       /* near-black used in body copy   */
  --black-pure:   #000000;
  --grey-900:     #0C0B0B;
  --grey-700:     #333333;
  --grey-500:     #727272;
  --grey-400:     #C4C4C4;
  --grey-300:     #D3D9DA;
  --grey-200:     #F0F0F1;
  --grey-100:     #F5F5F5;
  --grey-50:      #F9F9F9;
  --white:        #FFFFFF;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --bg:           var(--white);
  --bg-alt:       var(--grey-50);
  --bg-band:      var(--grey-100);
  --bg-dark:      var(--black);
  --bg-dark-alt:  var(--signolia-myrtle-deep);

  --fg-1:         var(--black);            /* primary text */
  --fg-2:         var(--signolia-myrtle-deep); /* headings on light */
  --fg-3:         var(--grey-500);         /* secondary text */
  --fg-on-dark:   var(--white);
  --fg-link:      var(--signolia-myrtle);
  --fg-link-hover:var(--signolia-nectarine);

  /* ---------- ACCENTS / STATES ---------- */
  --accent:       var(--signolia-nectarine);
  --accent-hover: #D96F0E;
  --accent-on:    var(--white);

  --success:      #2EBD59;
  --danger:       #CD201F;
  --info:         #00B9EB;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:    'Inter', 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', 'Open Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- TYPE SCALE (Major Third — 1.250) ---------- */
  --fs-h1:        3.05em;   /* 48.83px */
  --fs-h2:        2.44em;   /* 39.06px */
  --fs-h3:        1.95em;   /* 31.25px */
  --fs-h4:        1.56em;   /* 25.00px */
  --fs-h5:        1.25em;   /* 20.00px */
  --fs-body:      1.00em;   /* 16.00px */
  --fs-caption:   0.80em;   /* 12.80px */
  --fs-small:     0.64em;   /* 10.24px */

  --lh-tight:     1.10;
  --lh-snug:      1.25;
  --lh-normal:    1.45;
  --lh-loose:     1.6;

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

  /* ---------- SPACING (8pt grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- RADII ---------- */
  --radius-xs:  3px;
  --radius-sm:  5px;   /* default — used on most cards/pills */
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 999px;
  --radius-squircle: 22%; /* logomark "diamond squircle" feel */

  /* ---------- BORDERS ---------- */
  --border-1:   1px solid var(--grey-300);
  --border-soft:1px solid var(--grey-200);
  --border-strong: 1px solid var(--grey-400);

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.07);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.12);
  --shadow-overlay: 0 24px 60px rgba(0,0,0,0.20);

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --container-pad: 232.5px; /* 1905-wide canvas → 232.5 gutters */
  --header-h:      91px;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Use directly OR copy into your component.
   ========================================================= */
html { font-size: 16px; }

body, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  background: var(--bg);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: inherit;
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: inherit;
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: inherit;
}
.h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: inherit;
}
.h5, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: inherit;
}
/* Default heading color when not inside a colored surface */
body { }
body > * h1:not([style*="color"]),
body > * h2:not([style*="color"]),
body > * h3:not([style*="color"]),
body > * h4:not([style*="color"]),
body > * h5:not([style*="color"]) { /* inline color wins; otherwise inherit from container */ }
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signolia-myrtle);
}
.lede {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 20px;
  line-height: var(--lh-loose);
  color: var(--fg-1);
}
.caption, small.caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}
.smallprint {
  font-size: var(--fs-small);
  color: var(--fg-3);
}
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--grey-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--signolia-plum);
}
a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: var(--fg-link-hover); }

/* =========================================================
   UTILITY — brand surfaces
   ========================================================= */
.surface-light { background: var(--bg); color: var(--fg-1); }
.surface-band  { background: var(--bg-band); color: var(--fg-1); }
.surface-dark  { background: var(--bg-dark); color: var(--fg-on-dark); }
.surface-myrtle{ background: var(--signolia-myrtle-deep); color: var(--fg-on-dark); }
.surface-nectarine{ background: var(--signolia-nectarine); color: #fff; }