/*
 * Taller Otero's — Design System
 * Colors & Typography CSS Custom Properties
 *
 * Fuentes vía Adobe Fonts (typekit):
 *   komu-new-d       → display/logo principal         ✓ original
 *   espiritu-script  → script cursiva "Otero's"       ✓ original
 *   lulo-one         → block display bold             ✓ original
 *   lorimer-no-2     → serif display secundaria       ✓ original
 *   DM Sans          → cuerpo / UI                    ✓ Google Fonts
 */

@import url('https://use.typekit.net/ydu8uyr.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ─── BASE COLOR PALETTE ──────────────────────────────────────────────── */
:root {
  /* 8 brand colors */
  --color-navy:       #2B3449;  /* Azul Marino — primary dark */
  --color-olive:      #4B4E39;  /* Verde Oliva — secondary dark */
  --color-rust:       #854332;  /* Óxido — warm dark accent */
  --color-red:        #CB443A;  /* Rojo — primary accent */
  --color-orange:     #D76E3F;  /* Naranja — secondary accent */
  --color-gold:       #CCAB5C;  /* Dorado — premium highlight */
  --color-blue:       #4775B8;  /* Azul Medio — active / link */
  --color-cream:      #F9F6E3;  /* Crema — light background */

  /* Tints */
  --color-navy-tint:  #959AA8;
  --color-olive-tint: #A2A49C;
  --color-rust-tint:  #C2A199;
  --color-red-tint:   #E5A29D;
  --color-orange-tint:#EBB79F;
  --color-gold-tint:  #E6D5AE;
  --color-blue-tint:  #A3BADC;
  --color-cream-deep: #EBE5C8;  /* Deeper cream for borders/rules */

  /* Shades */
  --color-navy-shade:  #181E2B;
  --color-olive-shade: #2C2E22;
  --color-rust-shade:  #4E281E;
  --color-red-shade:   #7A2922;
  --color-orange-shade:#814226;
  --color-gold-shade:  #7A6637;
  --color-blue-shade:  #2B4770;

  /* ─── SEMANTIC TOKENS ─────────────────────────────────────────────── */

  /* Backgrounds */
  --bg-primary:      var(--color-navy);
  --bg-secondary:    var(--color-cream);
  --bg-warm:         var(--color-olive);
  --bg-accent:       var(--color-orange);

  /* Foregrounds / text */
  --fg-on-dark:      var(--color-cream);    /* text on navy/olive/rust/red/orange */
  --fg-on-cream:     var(--color-navy);     /* text on cream bg */
  --fg-accent:       var(--color-gold);     /* accent text on dark bg */
  --fg-link:         var(--color-blue);     /* links, active states */
  --fg-muted:        var(--color-cream-deep); /* subdued text */

  /* Borders / dividers */
  --border-primary:  var(--color-cream-deep);
  --border-accent:   var(--color-gold);
  --border-dark:     var(--color-navy-shade);

  /* Interactive states */
  --hover-opacity:   0.85;
  --press-scale:     0.97;
  --transition:      all 300ms ease-out;

  /* ─── TYPOGRAPHY ──────────────────────────────────────────────────── */

  /* Font families */
  --font-display:    'komu-new-d', 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-block:      'lulo-one', 'Nunito', sans-serif;
  --font-script:     'espiritu-script', 'Pacifico', cursive;
  --font-serif:      'lorimer-no-2', Georgia, serif;  /* opcional / editorial */
  --font-body:       'DM Sans', system-ui, sans-serif; /* body + UI principal */

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Letter spacing (display always tracked wide) */
  --ls-display:  0.08em;
  --ls-caps:     0.12em;
  --ls-tight:    -0.01em;
  --ls-body:     0em;

  /* Type scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */
  --text-6xl:   3.75rem;   /* 60px */
  --text-7xl:   4.5rem;    /* 72px */
  --text-8xl:   6rem;      /* 96px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ─── SPACING ─────────────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ─── RADII ───────────────────────────────────────────────────────── */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-pill: 999px;

  /* ─── SHADOWS ─────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(28,43,66,0.18);
  --shadow-md:  0 4px 12px rgba(28,43,66,0.18);
  --shadow-lg:  0 8px 24px rgba(28,43,66,0.22);

  /* ─── LAYOUT ──────────────────────────────────────────────────────── */
  --max-width:  1200px;
  --gutter:     var(--space-8);
}

/* ─── SEMANTIC TYPE CLASSES ────────────────────────────────────────────── */

/* komu-new-d — display/logo, siempre mayúsculas */
.oteros-h1 {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.oteros-h2 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.oteros-h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* lulo-one — titulares secundarios, siempre mayúsculas */
.oteros-headline {
  font-family: var(--font-block);
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: var(--lh-snug);
}

/* espiritu-script — wordmark cursiva "Otero's" */
.oteros-script {
  font-family: var(--font-script);
  font-size: var(--text-4xl);
  letter-spacing: -0.01em;
}

/* lorimer-no-2 — uso editorial opcional (citas, documentos) */
.oteros-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

.oteros-body-italic {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

/* DM Sans — body, UI, etiquetas, formularios, datos */
.oteros-label {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.oteros-ui {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

.oteros-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* ─── UTILITY CLASSES ──────────────────────────────────────────────────── */

/* Color backgrounds */
.bg-navy   { background-color: var(--color-navy);   color: var(--color-cream); }
.bg-olive  { background-color: var(--color-olive);  color: var(--color-cream); }
.bg-rust   { background-color: var(--color-rust);   color: var(--color-cream); }
.bg-red    { background-color: var(--color-red);    color: var(--color-cream); }
.bg-orange { background-color: var(--color-orange); color: var(--color-cream); }
.bg-gold   { background-color: var(--color-gold);   color: var(--color-navy);  }
.bg-blue   { background-color: var(--color-blue);   color: var(--color-cream); }
.bg-cream  { background-color: var(--color-cream);  color: var(--color-navy);  }

/* Divider / rule */
.oteros-rule {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: var(--space-4) 0;
}

/* Badge / stitch border */
.oteros-badge {
  display: inline-block;
  border: 2px solid currentColor;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-6);
  outline: 3px solid currentColor;
  outline-offset: -6px;
}