/* ============================================================
   Ops Consulting AI — Design Tokens
   Healthtech · AI · Operations consulting
   ============================================================ */

/* Fonts — loaded from Google Fonts.
   ⚠ FONT SUBSTITUTION NOTE: No licensed brand fonts were provided.
   - Display/Logo:  Instrument Serif (italic for the wordmark)
   - UI / Body:     Geist Sans (geometric, technical)
   - Mono / Data:   Geist Mono
   If the brand owner prefers different fonts (e.g. licensed Söhne,
   GT America, or a custom face), replace the @import below and the
   font-family stacks. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ── LOGO PALETTE (locked — must match SVG fills exactly) ─
     Si cambia uno de estos, regenere los SVGs en assets/logos/.
     Marca           = #0E4F4A (square fill)
     Pulso           = #2AB573 (stroke + AI pill bg)
     Spark dot       = #FF7A59 (coral end-of-pulse dot)
     Wordmark ink    = #062624 (Instrument Serif italic)
     Wordmark inv.   = #F2F5F4 (sobre fondo deep)
     Tagline ink     = #6B7570
  */

  /* ── Brand palette ────────────────────────────────────────── */
  /* Primary: deep clinical green — trust, healing, calm */
  --brand-deep:        #0E4F4A;   /* primary surface, headlines on light */
  --brand-deep-2:      #0A3A36;   /* hover / pressed deep green */
  --brand-deep-3:      #062624;   /* near-black green, top of header */

  /* Signal: vital green — pulse, life, action */
  --brand-signal:      #2AB573;   /* primary action, links, accents */
  --brand-signal-2:    #1F9A60;   /* hover */
  --brand-signal-soft: #D7F0E2;   /* signal tints, success surfaces */

  /* Spark: warm energetic accent — disruption, AI shimmer */
  --brand-spark:       #FF7A59;   /* sparing use: highlights, AI badges */
  --brand-spark-soft:  #FFE6DE;

  /* Neutrals — warm off-whites and inky greens */
  --bg:                #F6F8F7;   /* page background */
  --bg-2:              #ECEFEE;   /* secondary surface */
  --bg-3:              #E2E7E5;   /* tertiary surface, dividers on light */
  --paper:             #FFFFFF;   /* cards, paper */
  --ink:               #0A1A18;   /* primary text */
  --ink-2:             #2C3835;   /* secondary text */
  --ink-3:             #6B7570;   /* tertiary text, captions */
  --ink-4:             #A4ADA9;   /* placeholders, disabled */
  --hairline:          #D6DBD9;   /* 1px dividers */

  /* Dark surfaces (used on the header band and key marketing sections) */
  --dark-bg:           #062624;
  --dark-bg-2:         #0A3A36;
  --dark-fg:           #F2F5F4;
  --dark-fg-2:         #B7C4C0;
  --dark-hairline:     #15433E;

  /* Semantic */
  --success:           #2AB573;
  --warning:           #F5B14C;
  --danger:            #E5484D;
  --info:              #3E7BFA;

  /* ── Typography ───────────────────────────────────────────── */
  --font-display:      "Instrument Serif", "Source Serif 4", Georgia, serif;
  --font-sans:         "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:         "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (rem-based, 16px root) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

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

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-normal: 0;
  --ls-wide:  0.08em;
  --ls-mega:  0.18em;   /* used for eyebrow / category labels */

  /* ── Spacing scale (8pt grid w/ 4pt subdivisions) ─────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ── Shadows / Elevation ──────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(6, 38, 36, 0.06), 0 1px 1px rgba(6, 38, 36, 0.04);
  --shadow-2: 0 2px 6px rgba(6, 38, 36, 0.06), 0 1px 2px rgba(6, 38, 36, 0.04);
  --shadow-3: 0 8px 24px rgba(6, 38, 36, 0.08), 0 2px 6px rgba(6, 38, 36, 0.05);
  --shadow-4: 0 24px 56px rgba(6, 38, 36, 0.14), 0 8px 16px rgba(6, 38, 36, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--hairline);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(42, 181, 115, 0.30);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--brand-signal);
}

.t-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}

.t-h1, h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 5vw, var(--fs-72));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.t-h1, h1 { color: var(--ink); }
.bg-dark .t-h1, .bg-dark h1, .bg-deep .t-h1, .bg-deep h1,
.dark .t-h1, .dark h1, .deep .t-h1, .deep h1 { color: var(--dark-fg); }

.t-display {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 6vw, var(--fs-96));
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  line-height: 0.98;
  color: var(--ink);
}

.t-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-40);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
}
.t-h2, h2 { color: var(--ink); }
.bg-dark .t-h2, .bg-dark h2, .bg-deep .t-h2, .bg-deep h2,
.dark .t-h2, .dark h2, .deep .t-h2, .deep h2 { color: var(--dark-fg); }

.t-h3, h3, .t-h4, h4 { color: var(--ink); }
.bg-dark h3, .bg-deep h3, .bg-dark h4, .bg-deep h4,
.dark h3, .deep h3, .dark h4, .deep h4 { color: var(--dark-fg); }

.t-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
}

.t-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.t-body, p, body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}

.t-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--ink-2);
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--ink-3);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--ink-3);
}

.t-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}