/* ============================================================
   Transformación Social Positiva (TSP) — Design Foundations
   Colors + Typography tokens
   ------------------------------------------------------------
   Brand sampled from the corporate deck: deep institutional navy
   + neutral steel gray. Elevated with a warm amber (optimism /
   "positiva") and a quiet teal (growth / social value).
   Fonts loaded from Google Fonts — see README for substitution
   note (original deck rendered in NotebookLM defaults).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Newsreader:ital,opsz,wght@0,18..72,400;0,18..72,500;1,18..72,400&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --tsp-navy:        #1B2D42; /* primary — logo, headings, fills      */
  --tsp-navy-deep:   #122033; /* deepest — badges, footers, overlays  */
  --tsp-navy-700:    #243d58; /* hover / lifted navy                  */
  --tsp-navy-600:    #345173; /* secondary navy text                  */
  --tsp-steel:       #76787A; /* monogram "S", muted UI gray          */
  --tsp-steel-soft:  #9CA3AF; /* wordmark gray, captions              */

  /* ---------- ACCENTS (elevation) ---------- */
  --tsp-amber:       #D38B2D; /* warmth / optimism — primary accent   */
  --tsp-amber-bright:#ECA63E; /* hover / highlight                    */
  --tsp-amber-soft:  #F6E9D4; /* amber tint surface                   */
  --tsp-teal:        #1E6F61; /* growth / positive / success          */
  --tsp-teal-soft:   #DCEBE7; /* teal tint surface                    */

  /* ---------- NEUTRAL SCALE ---------- */
  --tsp-white:       #FFFFFF;
  --tsp-50:          #F7F8FA; /* page wash            */
  --tsp-100:         #EDEFF2; /* panel / card alt     */
  --tsp-200:         #DCE0E6; /* hairline borders     */
  --tsp-300:         #C3C9D2; /* strong borders       */
  --tsp-400:         #9AA2AE; /* disabled / icon mute */
  --tsp-500:         #6B7280; /* secondary text       */
  --tsp-600:         #4A5360; /* body on light        */
  --tsp-700:         #313a47; /* strong body          */
  --tsp-900:         #141b25; /* near-black ink       */

  /* ---------- SEMANTIC ---------- */
  --fg-1: var(--tsp-navy);     /* primary text / headings   */
  --fg-2: var(--tsp-600);      /* body text                 */
  --fg-3: var(--tsp-500);      /* secondary / captions      */
  --fg-muted: var(--tsp-400);  /* tertiary / placeholders   */
  --fg-on-navy: #EAF0F7;       /* text on navy              */
  --fg-on-navy-soft: #9DB0C6;  /* muted text on navy        */

  --bg-1: var(--tsp-white);    /* primary surface           */
  --bg-2: var(--tsp-50);       /* page background           */
  --bg-3: var(--tsp-100);      /* sunken panel              */
  --bg-navy: var(--tsp-navy);  /* inverse surface           */

  --border-1: var(--tsp-200);  /* default hairline          */
  --border-2: var(--tsp-300);  /* emphasized border         */
  --accent: var(--tsp-amber);  /* default accent            */
  --positive: var(--tsp-teal);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;

  /* ---------- TYPE SCALE (fluid-ready, px base) ---------- */
  --text-display: 600 clamp(2.6rem, 1.6rem + 3.2vw, 4.25rem)/1.04 var(--font-display);
  --text-h1: 700 clamp(2rem, 1.4rem + 1.9vw, 3rem)/1.08 var(--font-display);
  --text-h2: 700 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.14 var(--font-display);
  --text-h3: 600 1.375rem/1.25 var(--font-display);
  --text-h4: 600 1.0625rem/1.3 var(--font-display);
  --text-eyebrow: 600 0.8125rem/1.2 var(--font-body);
  --text-lead: 400 clamp(1.125rem, 1rem + 0.4vw, 1.375rem)/1.55 var(--font-body);
  --text-body: 400 1.0625rem/1.6 var(--font-body);
  --text-sm: 400 0.9375rem/1.55 var(--font-body);
  --text-caption: 500 0.8125rem/1.45 var(--font-body);
  --text-quote: 500 clamp(1.6rem, 1.1rem + 1.8vw, 2.75rem)/1.22 var(--font-serif);

  /* tracking */
  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.02em;
  --tracking-display: -0.025em;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (cool navy-tinted, restrained) ---------- */
  --shadow-xs: 0 1px 2px rgba(18, 32, 51, 0.06);
  --shadow-sm: 0 1px 3px rgba(18, 32, 51, 0.08), 0 1px 2px rgba(18, 32, 51, 0.05);
  --shadow-md: 0 6px 16px -4px rgba(18, 32, 51, 0.12), 0 2px 6px -2px rgba(18, 32, 51, 0.08);
  --shadow-lg: 0 18px 40px -12px rgba(18, 32, 51, 0.18), 0 6px 14px -6px rgba(18, 32, 51, 0.10);
  --shadow-focus: 0 0 0 3px rgba(211, 139, 45, 0.35);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --rule: 1px solid var(--border-1);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply with the .tsp scope or globally in kit pages.
   ============================================================ */
.tsp-type-reset, .tsp {
  color: var(--fg-1);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tsp h1, .tsp .h1 { font: var(--text-h1); letter-spacing: var(--tracking-display); color: var(--fg-1); margin: 0; }
.tsp h2, .tsp .h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; }
.tsp h3, .tsp .h3 { font: var(--text-h3); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; }
.tsp h4, .tsp .h4 { font: var(--text-h4); color: var(--fg-1); margin: 0; }
.tsp p  { font: var(--text-body); color: var(--fg-2); margin: 0; text-wrap: pretty; }

.tsp .display  { font: var(--text-display); letter-spacing: var(--tracking-display); color: var(--fg-1); }
.tsp .lead     { font: var(--text-lead); color: var(--fg-2); text-wrap: pretty; }
.tsp .quote    { font: var(--text-quote); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; }
.tsp .sm       { font: var(--text-sm); color: var(--fg-2); }
.tsp .caption  { font: var(--text-caption); color: var(--fg-3); }

.tsp .eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}