/* =======================================================================
   Fonema — Colors & Type
   Inglés Empresarial. Mexico. Brand manual 2021.

   Brand palette is intentionally minimal: a single deep teal-blue, paired
   with black, white and a warm off-white paper. Type uses geometric thin
   sans (MADE TOMMY) as the workhorse and a hand-written script
   (Gold Girls) as a personality accent — used sparingly for a single word
   or short phrase.
   ======================================================================= */

/* -------- Fonts -------- */
@font-face {
  font-family: 'MADE TOMMY';
  src: url('fonts/MADETOMMY-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MADE TOMMY';
  src: url('fonts/MADETOMMY-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MADE TOMMY';
  src: url('fonts/MADETOMMY-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gold Girls';
  src: url('fonts/GoldGirls.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLORS ---------- */
  /* Official corporate palette from the brand manual (page 08).
     Blue is the primary; the others are supporting accents — use them
     sparingly and never as a co-equal alongside the blue. */

  /* Primary */
  --fonema-blue:        #285872;   /* Fonema Blue — primary */
  --fonema-blue-700:    #1f455a;   /* hover / pressed */
  --fonema-blue-900:    #14303f;   /* deepest */
  --fonema-blue-300:    #6388a0;   /* muted */
  --fonema-blue-100:    #d2dde4;   /* tint background */
  --fonema-blue-050:    #ecf0f3;   /* very subtle wash */

  /* Supporting accents (manual) */
  --fonema-prussian:    #273D4F;   /* Prussian Blue — deep secondary */
  --fonema-imperial:    #86154D;   /* Imperial Red — sparing accent only */
  --fonema-space:       #161E25;   /* Space Black — use instead of pure black */
  --fonema-honeydew:    #F2F3F4;   /* Honeydew — cool off-white */

  /* Neutrals (derived) */
  --fonema-ink:         #161E25;   /* Space Black */
  --fonema-ink-2:       #2b3540;
  --fonema-graphite:    #4a5764;
  --fonema-slate:       #7a8693;
  --fonema-mute:        #aab2bb;
  --fonema-line:        #e3e6ea;
  --fonema-paper:       #F2F3F4;   /* Honeydew — cool paper */
  --fonema-paper-2:     #e7eaed;
  --fonema-white:       #ffffff;

  /* Semantic (kept restrained — brand prefers neutrals) */
  --fonema-success:     #2f7d5b;
  --fonema-warning:     #b8861a;
  --fonema-danger:      var(--fonema-imperial);

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:                 var(--fonema-white);
  --bg-soft:            var(--fonema-paper);
  --bg-tint:            var(--fonema-blue-050);
  --bg-invert:          var(--fonema-blue);

  --fg:                 var(--fonema-ink);
  --fg-2:               var(--fonema-graphite);
  --fg-3:               var(--fonema-slate);
  --fg-mute:            var(--fonema-mute);
  --fg-on-blue:         var(--fonema-white);

  --accent:             var(--fonema-blue);
  --accent-hover:       var(--fonema-blue-700);
  --accent-soft:        var(--fonema-blue-100);

  --line:               var(--fonema-line);
  --line-strong:        #cfd3d8;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:       'MADE TOMMY', 'Montserrat', system-ui, sans-serif;
  --font-sans:          'MADE TOMMY', 'Montserrat', system-ui, sans-serif;
  --font-script:        'Gold Girls', 'Caveat', 'Homemade Apple', cursive;
  --font-mono:          'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale (1.25 modular, anchored at 16) */
  --fs-12:  0.75rem;
  --fs-14:  0.875rem;
  --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;

  /* Weights — MADE TOMMY only ships Thin / Regular / Medium in our kit.
     Headlines USE THIN at large sizes — this is the brand signature
     (see logo). Avoid bold weights. */
  --fw-thin:    100;
  --fw-regular: 400;
  --fw-medium:  500;

  /* Tracking */
  --ls-tight:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-wider:    0.18em;     /* Use for ALL-CAPS labels (matches logo) */

  /* Line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-body:     1.55;

  /* ---------- SPACING ---------- */
  --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;

  /* ---------- RADII ---------- */
  /* Brand prefers gentle, near-rectangular corners; isotype is the only
     thing that's a full circle. */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  22px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1:   0 1px 2px rgba(17,20,24,0.06), 0 1px 1px rgba(17,20,24,0.04);
  --shadow-2:   0 4px 14px rgba(17,20,24,0.08), 0 1px 2px rgba(17,20,24,0.05);
  --shadow-3:   0 18px 40px rgba(12,51,73,0.14), 0 2px 6px rgba(12,51,73,0.06);
  --ring-focus: 0 0 0 3px rgba(24,88,120,0.28);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 0.84, 0.32, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
}

/* =======================================================================
   Semantic element styles
   ======================================================================= */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — thin, generous, slightly tight tracking, mirrors the wordmark */
.fn-display, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--fs-72);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

h2, .fn-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--fs-56);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

h3, .fn-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

h4, .fn-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .fn-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}

.fn-lead {
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--fg-2);
}

.fn-small {
  font-size: var(--fs-14);
  color: var(--fg-3);
}

/* All-caps eyebrow — matches the wide letter-spacing in the logo's tagline */
.fn-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--fg-3);
}

/* Script accent — single-word personality flourish */
.fn-script {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  color: var(--accent);
  letter-spacing: 0;
}

code, .fn-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-tint);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-1) var(--ease-standard);
}
a:hover { color: var(--accent-hover); }