/* ============================================================
   HENKO STUDIO CREATIVO — Colors & Typography
   ============================================================
   Direct, bold, warm. Coral is the action color. Black is the
   premium frame. Cream is warmth. White is breathing room.
   Type is treated as a design element — big, confident, with
   intentional rhythm between heavy condensed sans, bold italic
   serif, and clean grotesque body.
   ============================================================ */

/* — Google Fonts (load once at the document head) —
   Montserrat: brand body + UI grotesque (already used in
     henkostudio.com.mx production site).
   Anton: heavy condensed display for impact statements
     (matches the "CONTENIDO PROFESIONAL" treatment).
   DM Serif Display: bold italic serif for the warm,
     hospitality-style moments (matches "Buscamos Asistente
     Creativo"). Used SPARINGLY — display only, never body.
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700;1,800&family=Anton&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* ────────────────────────────────────────────────────────
     COLOR — Primary palette
     ──────────────────────────────────────────────────────── */

  /* Coral — the action color. Buttons, CTAs, accents, links.
     NEVER a dominant background. NEVER decorative without
     purpose. */
  --henko-coral:        #E55151;
  --henko-coral-dark:   #C03B3B;  /* hover / press on coral */
  --henko-coral-soft:   #F1948F;  /* disabled / quiet accent */

  /* Deep black — the premium frame. Headers, impact sections,
     slide backgrounds. Default dark surface. */
  --henko-black:        #1A1A1A;
  --henko-black-90:     #2A2A2A;  /* elevated dark surface */
  --henko-black-70:     #4A4A4A;  /* dim text / borders on dark */

  /* White — text on dark, breathing room on light content. */
  --henko-white:        #FFFFFF;

  /* Cream — the warm alternative. Long-form light surfaces,
     warm backdrops that aren't sterile white. */
  --henko-cream:        #F4F5E9;
  --henko-cream-dark:   #E8E9D9;  /* cream borders / wells */

  /* Neutral grays — used sparingly; prefer cream + black. */
  --henko-ink:          #1A1A1A;
  --henko-ink-70:       #4D4D4D;
  --henko-ink-50:       #8A8A8A;  /* muted captions */
  --henko-ink-30:       #C8C8C8;  /* hairlines on light */
  --henko-ink-10:       #ECECEC;

  /* ────────────────────────────────────────────────────────
     COLOR — Semantic tokens
     Use these in components; remap them per surface (light /
     dark) by overriding inside .henko-dark.
     ──────────────────────────────────────────────────────── */
  --bg:          var(--henko-cream);   /* default page surface */
  --bg-alt:      var(--henko-white);   /* card / content well */
  --bg-invert:   var(--henko-black);   /* premium / hero */

  --fg:          var(--henko-black);   /* primary text */
  --fg-muted:    var(--henko-ink-50);  /* secondary text */
  --fg-invert:   var(--henko-white);   /* text on dark */

  --accent:      var(--henko-coral);   /* action + emphasis */
  --accent-fg:   var(--henko-white);   /* text on coral */
  --accent-hover:var(--henko-coral-dark);

  --rule:        var(--henko-cream-dark);  /* hairlines */
  --rule-strong: var(--henko-black);

  /* ────────────────────────────────────────────────────────
     TYPE — Font families
     ──────────────────────────────────────────────────────── */
  --font-sans:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-condensed: 'Anton', 'Montserrat', system-ui, sans-serif;       /* heavy display only */
  --font-serif:     'DM Serif Display', 'Georgia', serif;                /* italic display only */
  --font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;           /* utility only */

  /* ────────────────────────────────────────────────────────
     TYPE — Scale (mobile→desktop via clamp)
     Slides + marketing use the display sizes. Body sits at 16.
     ──────────────────────────────────────────────────────── */
  --t-display-xl: clamp(3.5rem, 9vw, 7rem);     /* hero impact */
  --t-display-l:  clamp(2.75rem, 6.5vw, 5rem);  /* slide titles */
  --t-display-m:  clamp(2rem, 4.5vw, 3.25rem);  /* page titles */
  --t-h1:         clamp(2rem, 3.5vw, 2.75rem);
  --t-h2:         clamp(1.5rem, 2.5vw, 2rem);
  --t-h3:         1.25rem;
  --t-body-l:     1.125rem;   /* lead paragraphs */
  --t-body:       1rem;       /* default */
  --t-body-s:     0.875rem;
  --t-caption:    0.75rem;
  --t-eyebrow:    0.7rem;     /* uppercase tracked label */

  /* Line heights — tight on display, generous on body. */
  --lh-display:   1.02;
  --lh-heading:   1.1;
  --lh-body:      1.6;
  --lh-tight:     1.3;

  /* Letter spacing */
  --ls-display:   -0.03em;    /* tighten heavy sans */
  --ls-tight:     -0.02em;
  --ls-normal:    0;
  --ls-eyebrow:   0.14em;     /* uppercase eyebrows */

  /* ────────────────────────────────────────────────────────
     SPACING — 4pt scale
     ──────────────────────────────────────────────────────── */
  --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 — restrained. Henko is bold, not soft.
     ──────────────────────────────────────────────────────── */
  --radius-xs:  3px;
  --radius-sm:  6px;    /* default card radius */
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* ────────────────────────────────────────────────────────
     SHADOWS — only on light surfaces; never on dark.
     Subtle, never the "agency drop-shadow" trope.
     ──────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);

  /* ────────────────────────────────────────────────────────
     MOTION — fast, decisive, never bouncy.
     ──────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ────────────────────────────────────────────────────────
   DARK / INVERTED SURFACE
   Apply to <section class="henko-dark"> or <body class="henko-dark">.
   Remaps semantic tokens; component code never has to branch.
   ──────────────────────────────────────────────────────── */
.henko-dark {
  --bg:        var(--henko-black);
  --bg-alt:    var(--henko-black-90);
  --fg:        var(--henko-white);
  --fg-muted:  rgba(255,255,255,0.62);
  --rule:      rgba(255,255,255,0.12);
  background: var(--bg);
  color: var(--fg);
}

/* ────────────────────────────────────────────────────────
   BASE — semantic element styles
   These are CSS-class semantics (.h1, .body, etc.) so that
   you can apply hierarchy without forcing an h1 in markup.
   ──────────────────────────────────────────────────────── */
body, .henko-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* DISPLAY — heavy condensed sans. Big impact, no body copy. */
.henko-display-xl,
.henko-display-l {
  font-family: var(--font-condensed);
  font-weight: 400;             /* Anton ships only at 400 */
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-transform: none;
}
.henko-display-xl { font-size: var(--t-display-xl); }
.henko-display-l  { font-size: var(--t-display-l);  }

/* DISPLAY — Montserrat 900 alternative when the condensed
   feels too editorial and you want the brand's own grotesque. */
.henko-display-grotesque {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--t-display-l);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

/* DISPLAY — italic serif. Warm, editorial. Use SPARINGLY.
   Used for invitational headlines, hospitality moments. */
.henko-display-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-display-l);
  letter-spacing: -0.01em;
  line-height: var(--lh-display);
}

/* HEADINGS */
h1, .henko-h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--t-h1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
}
h2, .henko-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--t-h2);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
}
h3, .henko-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
}

/* EYEBROW — uppercase tracked label. Coral by default. */
.henko-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* BODY variants */
p, .henko-p { font-size: var(--t-body); line-height: var(--lh-body); }
.henko-lead { font-size: var(--t-body-l); line-height: 1.55; }
.henko-small{ font-size: var(--t-body-s); }
.henko-caption {
  font-size: var(--t-caption);
  color: var(--fg-muted);
  line-height: 1.4;
}

/* LINKS — coral, no underline by default, underline on hover. */
a, .henko-link {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .henko-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* Selection */
::selection { background: var(--henko-coral); color: var(--henko-white); }

/* The H of Henko: split-color wordmark used inline.
   <span class="henko-mark">Henk<span>o</span></span>  */
.henko-mark { font-weight: 900; letter-spacing: var(--ls-display); color: var(--fg); }
.henko-mark > span { color: var(--accent); }