/* ============================================================
   HayTablao.uy — Color & Type Foundations
   The flamenco scene of Uruguay, as a design system.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---- Brand palette ---- */
  --color-red:        #8F1018; /* Deep Tablao Red — primary brand, CTAs, wordmark   */
  --color-burgundy:   #3D070A; /* Oxblood — dark backgrounds, headers, footers      */
  --color-ochre:      #C9821A; /* Ochre Gold — accents, dates, badges, highlights   */
  --color-terracotta: #B94A2C; /* Terracotta — hover, secondary buttons, chips      */
  --color-cream:      #F7EEDC; /* Warm Cream — backgrounds, cards, soft surfaces    */
  --color-offwhite:   #FFF8EA; /* Soft Off-White — high-contrast text on dark red   */
  --color-sand:       #E3D0B3; /* Muted Sand — dividers, borders, inactive states   */
  --color-charcoal:   #241817; /* Charcoal Brown — body text on light               */

  /* ---- Tints / derived (oklch-harmonised) ---- */
  --color-red-hover:      #A3151E; /* slightly warmer/brighter red on hover         */
  --color-ochre-soft:     #F0DFB8; /* ochre wash for secondary-button hover         */
  --color-burgundy-85:    rgba(61, 7, 10, 0.85);
  --color-burgundy-35:    rgba(61, 7, 10, 0.35);
  --color-cream-line:     #EADFC6; /* hairline divider on cream                     */

  /* ---- Semantic color roles ---- */
  --bg:            var(--color-cream);
  --bg-elevated:   var(--color-offwhite);
  --bg-dark:       var(--color-burgundy);
  --surface:       var(--color-offwhite);
  --border:        var(--color-sand);
  --border-strong: #D2B98C;
  --fg1:           var(--color-charcoal);          /* primary text on light         */
  --fg2:           #5A4946;                          /* secondary / metadata text     */
  --fg3:           #8A736E;                          /* tertiary / placeholder        */
  --fg-on-dark:    var(--color-offwhite);            /* primary text on burgundy      */
  --fg-on-dark-2:  rgba(255, 248, 234, 0.72);        /* secondary text on burgundy    */
  --accent:        var(--color-red);
  --accent-2:      var(--color-ochre);
  --focus-ring:    rgba(143, 16, 24, 0.45);

  /* ---- Type families ---- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Type scale (display = serif, ui = sans) ---- */
  --text-display:  clamp(48px, 7vw, 84px);  /* hero headline                  */
  --text-h1:       clamp(36px, 4.5vw, 56px);
  --text-h2:       clamp(28px, 3vw, 40px);
  --text-h3:       24px;
  --text-title:    20px;                     /* card / event titles            */
  --text-body:     17px;
  --text-ui:       16px;                     /* nav, buttons, labels           */
  --text-sm:       14px;
  --text-xs:       12px;                     /* chips, eyebrows                */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  --tracking-eyebrow: 0.14em;
  --tracking-label:   0.04em;

  /* ---- Spacing (8px 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;

  /* ---- Radius ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-soft: 0 8px 24px rgba(61, 7, 10, 0.10);
  --shadow-card: 0 4px 16px rgba(36, 24, 23, 0.08);
  --shadow-lift: 0 14px 36px rgba(61, 7, 10, 0.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  220ms;
}

/* ============================================================
   Semantic element styles — opt in via .ht-prose or use as ref
   ============================================================ */

.ht-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.ht-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h1); line-height: var(--leading-tight); color: var(--fg1); }
.ht-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--fg1); }
.ht-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--fg1); }

.ht-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ochre);
}

.ht-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-body); line-height: var(--leading-body); color: var(--fg1); }
.ht-meta { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm); color: var(--fg2); }
.ht-label { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-ui); letter-spacing: var(--tracking-label); }