/* =========================================================================
   Milfers Burgers · Colors & Type
   Design System v1.0
   ========================================================================= */

/* ---- Fonts (Brand-licensed — local .ttf/.otf files) -------------------- */
@font-face {
  font-family: 'Jersey M54';
  src: url('fonts/Jersey_M54.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brinnan';
  src: url('fonts/Brinnan-Thin.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brinnan';
  src: url('fonts/Brinnan-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brinnan';
  src: url('fonts/Brinnan-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Brinnan Bold & Black — archivos reales de la marca */
@font-face {
  font-family: 'Brinnan';
  src: url('fonts/Brinnan-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brinnan';
  src: url('fonts/Brinnan-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Markers Marker';
  src: url('fonts/Marker_Makers.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========== COLOR · PRIMARIES ========== */
  --milfers-ruby:        #D47F9A;   /* pale ruby — THE accent. CTAs, claim, active. */
  --milfers-green:       #213A35;   /* deep green — dominant surface. */

  /* ========== COLOR · SECONDARIES ========== */
  --milfers-black:       #151515;   /* opaque black — text on light, photo overlay. */
  --milfers-concrete:    #F1F2F2;   /* concrete — breathing rooms, text on green. */

  /* ========== COLOR · FUNCTIONAL EXTENSIONS ========== */
  --ruby-dark:           #9E5C72;   /* hover over ruby */
  --green-deep:          #152624;   /* hero gradient, photo overlay */
  --green-mid:           #2E524B;   /* cards on green, dividers */
  --concrete-soft:       #E5E6E6;   /* input fields */
  --muted-on-green:      rgba(241, 242, 242, 0.65);
  --muted-on-concrete:   rgba(21, 21, 21, 0.60);

  /* ========== GRADIENTS (official mesh — use as image, do NOT reconstruct with CSS) ========== */
  --grad-mesh-tl:        url('assets/gradients/mesh-tricolor-tl.webp'); /* @kind color */   /* rubí TL + verde TR · 5.9 KB */
  --grad-mesh-diag:      url('assets/gradients/mesh-tricolor-diag.webp'); /* @kind color */ /* rubí dominante · 5.9 KB */
  --grad-mesh-tr:        url('assets/gradients/mesh-tricolor-tr.webp'); /* @kind color */   /* verde dominante + rubí TR · 6.4 KB */
  --grad-mesh-ruby:      url('assets/gradients/mesh-ruby-soft.webp'); /* @kind color */     /* rubí suave · 4.7 KB */
  --grad-mesh-green:     url('assets/gradients/mesh-green-soft.webp'); /* @kind color */    /* verde suave · 5.4 KB */
  /* Auxiliary overlays (photo darkening, dividers — not mesh) */
  --grad-photo-overlay:  linear-gradient(180deg, transparent 40%, rgba(21,38,53,0.85) 100%); /* @kind color */
  --grad-divider-soft:   linear-gradient(90deg, transparent, rgba(212,127,154,0.3), transparent); /* @kind color */

  /* ========== SEMANTIC COLOR TOKENS ========== */
  --bg:                  var(--milfers-green);
  --bg-elevated:         var(--green-mid);
  --bg-alt:              var(--milfers-concrete);
  --bg-input:            var(--concrete-soft);

  --fg:                  var(--milfers-concrete);
  --fg-on-light:         var(--milfers-black);
  --fg-muted:            var(--muted-on-green);
  --fg-muted-light:      var(--muted-on-concrete);

  --accent:              var(--milfers-ruby);
  --accent-hover:        var(--ruby-dark);
  --border-soft:         rgba(241,242,242,0.12);
  --border-soft-light:   rgba(21,21,21,0.10);

  /* ========== TYPOGRAPHY · FAMILIES ========== */
  /* Brand-licensed fonts, served locally from /fonts. */
  --font-display:        'Jersey M54', 'Oswald', Impact, sans-serif;
  --font-body:           'Brinnan', 'DM Sans', -apple-system, system-ui, sans-serif;
  --font-accent:         'Markers Marker', 'Permanent Marker', 'Marker Felt', cursive;

  /* ========== TYPOGRAPHY · SCALE (mobile / desktop) ========== */
  --text-display-xl:     clamp(3.5rem,   calc(7vw + 1rem), 6rem);    /* 56 → 96 */
  --text-display-l:      clamp(2.5rem,   calc(5vw + 1rem), 4rem);    /* 40 → 64 */
  --text-h1:             clamp(2rem,     calc(3vw + 1rem), 3rem);    /* 32 → 48 */
  --text-h2:             clamp(1.375rem, calc(1vw + 1rem), 1.75rem); /* 22 → 28 */
  --text-h3:             clamp(1.125rem, calc(0.4vw + 1rem), 1.25rem); /* 18 → 20 */
  --text-body:           clamp(1rem,     calc(0.1vw + 0.95rem), 1.0625rem); /* 16 → 17 */
  --text-small:          clamp(0.8125rem, calc(0.1vw + 0.8rem), 0.875rem);  /* 13 → 14 */
  --text-accent:         clamp(1.25rem,  calc(1vw + 0.75rem), 1.75rem); /* 20 → 28 */

  /* Line heights */
  --lh-display-xl:       0.95; /* @kind font */
  --lh-display-l:        1; /* @kind font */
  --lh-h1:               1.05; /* @kind font */
  --lh-h2:               1.25; /* @kind font */
  --lh-h3:               1.35; /* @kind font */
  --lh-body:             1.65; /* @kind font */
  --lh-small:            1.5; /* @kind font */
  --lh-accent:           1; /* @kind font */

  /* Letter-spacing */
  --ls-display:          0.01em; /* @kind font */
  --ls-normal:           0; /* @kind font */

  /* ========== SPACING (4px base) ========== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ========== RADII (hard brand: max 4px) ========== */
  --radius-0:     0;
  --radius-sm:    2px;
  --radius-md:    4px;    /* brand ceiling */
  --radius-pill:  999px;  /* reserved for circular seals only */

  /* ========== SHADOWS (minimal — brand avoids heavy shadows) ========== */
  --shadow-none:      none;
  --shadow-flat:      0 0 0 1px rgba(21,21,21,0.08);
  --shadow-soft:      0 2px 8px rgba(21,21,21,0.18);
  --shadow-photo:     0 20px 40px -20px rgba(21,38,53,0.6);

  /* ========== TAP TARGETS (a11y) ========== */
  --tap-min:           44px; /* @kind spacing */

  /* ========== MOTION ========== */
  --ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:        140ms; /* @kind other */
  --dur-med:         240ms; /* @kind other */
  --dur-slow:        420ms; /* @kind other */

  /* ========== LAYOUT ========== */
  --container:       1200px;
  --container-wide:  1440px;
  --gutter:          clamp(16px, 4vw, 48px);
}

/* =========================================================================
   SEMANTIC / ELEMENT DEFAULTS
   ========================================================================= */

html { color-scheme: dark; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display ---- */
.display-xl, h1.display, .hero-title {
  font-family: var(--font-display);
  font-weight: 400;              /* Jersey is single-weight */
  font-size: var(--text-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
}
.display-l {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-l);
  line-height: var(--lh-display-l);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
}

/* ---- Headings ---- */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  text-transform: uppercase;
  margin: 0;
}
h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  margin: 0;
}
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  margin: 0;
}

/* ---- Body & small ---- */
p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  margin: 0;
}
.small, small {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-small);
  line-height: var(--lh-small);
}

/* ---- Accent (gestural) ---- */
.accent-marker {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--text-accent);
  line-height: var(--lh-accent);
  color: var(--accent);
}

/* ---- Eyebrow / label (technical microcopy) ---- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* =========================================================================
   BUTTONS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--milfers-black);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--milfers-concrete); }

.btn-secondary {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--fg);
}
.btn-secondary:hover { background: var(--fg); color: var(--milfers-green); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
}
.btn-ghost:hover { color: var(--accent); }

/* =========================================================================
   FOCUS (a11y)
   ========================================================================= */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =========================================================================
   UTILITIES
   ========================================================================= */

.divider-soft {
  height: 1px;
  background: var(--grad-divider-soft);
  border: 0;
}
.checker-strip {
  height: 24px;
  background-image: url('./assets/patterns/checker-strip.svg');
  background-repeat: repeat-x;
  background-size: auto 100%;
}
.diagonal-pattern {
  background-image: url('./assets/patterns/diagonal-stripes.svg');
  background-repeat: repeat;
  background-size: 80px 80px;
}