/* ============================================================
   El Sótano — Design System
   colors_and_type.css

   Drop on :root and you have the foundation: palette, type ramp,
   spacing, radii, shadows, motion, and semantic tokens.
   ============================================================ */

/* Brand-provided fonts. Native Record Sans + Montserrat are uploaded.
   Native Record Serif and Native Record Script are referenced via @font-face stubs
   so when the files arrive they can be dropped into /fonts/ without code changes. */
@font-face {
  font-family: "Native Record Sans";
  src: url("../fonts/Native_Record_Sans.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Native Record Serif";
  src: url("../fonts/Native_Record_Serif.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Native Record Script";
  src: url("../fonts/Native_Record_Script.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------- Color — core (canonical) ----------------
     Aligned to the brand spec:
       Off-White (PRIMARY)  #F6F4EE
       Oro / Latón (SECONDARY) #AB853A
       Blanco                #FFFFFF
       Gris Oscuro (BG)      #2D2D2D
       Gris Medio (BG)       #666666
       Rojo Error            #D32F2F
       Verde Confirmación    #1A4D3E
  */
  --off-white:    #F6F4EE;        /* PRIMARY — page background */
  --white:        #F5F1E8;
  --gold:         #AB853A;        /* SECONDARY — accent / CTA / focus */
  --gray-900:     #2D2D2D;        /* dark BG — header, footer, atmospheric */
  --gray-700:     #4A4A4A;        /* derived — secondary dark surface */
  --gray-500:     #666666;        /* medium gray — body-secondary */
  --gray-300:     #BFBFBF;        /* derived — borders / dividers */
  --gray-150:     #E5E3DD;        /* derived — tonal block in off-white range */
  --error:        #D32F2F;        /* Rojo Error */
  --success:      #1A4D3E;        /* Verde Confirmación — also speakeasy green */

  /* ---------------- Aliases (semantic synonyms used through the kit) ---------------- */
  --ink:          var(--gray-900);
  --ink-soft:     var(--gray-700);
  --paper:        var(--off-white);
  --paper-deep:   var(--gray-150);
  --bone:         #FCFBF7;        /* lightest off-white — inputs / highlight cards */
  --amber:        var(--gold);    /* primary accent — kept as synonym */
  --amber-deep:   #8A6A28;        /* gold hover / press, derived */
  --gold-soft:    #C9A668;        /* gilt ornaments, derived */
  --bottle:       var(--success); /* speakeasy green surfaces */
  --bottle-deep:  #103128;        /* bottle hover / depth */
  --oxblood:      var(--error);

  --ash-300:      var(--gray-300);
  --ash-500:      var(--gray-500);
  --ash-700:      var(--gray-700);
  --smoke:        rgba(45,45,45,0.06);

  /* ---------------- Color — semantic ---------------- */
  --bg:           var(--paper);
  --bg-deep:      var(--paper-deep);
  --bg-dark:      var(--ink);
  --bg-bottle:    var(--bottle);

  --fg:           var(--ink);
  --fg-muted:     var(--ash-700);
  --fg-faint:     var(--ash-500);
  --fg-on-dark:       #F6F4EE;        /* off-white for text on dark surfaces */
  --fg-on-dark-muted: rgba(246,244,238,0.66);

  --accent:       var(--gold);
  --accent-deep:  var(--amber-deep);
  --accent-soft:  var(--gold-soft);

  --border:       var(--ash-300);
  --border-on-dark: rgba(246,244,238,0.14);
  --divider:      var(--smoke);

  --focus-ring:   var(--amber);

  /* ---------------- Type — families ---------------- */
  /* ---------------- Type — families (brand-defined) ----------------
       Native Record Serif → titulares, hero, lenguaje editorial.
       Native Record Sans  → nav, botones, UI funcional, encabezados secundarios.
       Montserrat          → cuerpo, párrafos, textos largos.
       Native Record Script → acentos especiales (sparingly).
     Files: Native Record Sans + Montserrat are loaded.
     Native Record Serif + Script fall back to system equivalents
     until the brand files are provided. */
  --font-serif:   "Native Record Serif", "Times New Roman", Georgia, serif;
  --font-sans:    "Native Record Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Montserrat", "Native Record Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-script:  "Native Record Script", "Brush Script MT", "Snell Roundhand", cursive;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------------- Type — scale & weights ---------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Steps follow a soft modular curve, biased larger for editorial scale. */
  --step-12: 12px;
  --step-14: 14px;
  --step-16: 16px;
  --step-18: 18px;
  --step-20: 20px;
  --step-22: 22px;
  --step-28: 28px;
  --step-32: 32px;
  --step-40: 40px;
  --step-48: 48px;
  --step-64: 64px;
  --step-80: 80px;
  --step-96: 96px;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.16em;

  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-normal:  1.3;
  --leading-relaxed: 1.5;
  --leading-loose:   1.6;

  /* ---------------- Spacing (4px base) ---------------- */
  --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;

  --container-max: 1280px;
  --container-pad-mobile:  24px;
  --container-pad-desktop: 48px;

  --section-pad-desktop: var(--space-9);   /* 96 */
  --section-pad-tablet:  var(--space-8);   /* 64 */
  --section-pad-mobile:  var(--space-7);   /* 48 */

  /* ---------------- Radii ---------------- */
  --radius-sm: 4px;       /* chips / inputs */
  --radius-md: 8px;       /* buttons, small cards (matches Figma ProductInfoCard) */
  --radius-lg: 16px;      /* modals, large cards */
  --radius-pill: 999px;

  /* ---------------- Shadows / elevation ---------------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(45,45,45,0.04), 0 2px 8px rgba(45,45,45,0.04);
  --elev-2: 0 4px 16px rgba(45,45,45,0.08), 0 1px 2px rgba(45,45,45,0.06);
  --elev-3: 0 12px 32px rgba(45,45,45,0.14);
  --elev-inset-amber: inset 0 0 0 1px var(--gold);

  /* ---------------- Motion ---------------- */
  --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-press:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro:    150ms;
  --dur-state:    250ms;
  --dur-atmos:    500ms;

  /* ---------------- Layout — semantic ---------------- */
  --header-height: 88px;
  --header-height-compact: 64px;
}

/* ============================================================
   Base resets + body
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-16);
  line-height: var(--leading-loose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--amber);
  color: var(--ink);
}

/* ============================================================
   Semantic typography (use these tags directly, or copy the values
   onto your own classes / Tailwind utilities).
   ============================================================ */

.display {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: clamp(56px, 8vw, var(--step-96));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: clamp(40px, 5vw, var(--step-48));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: clamp(28px, 3.5vw, var(--step-32));
  line-height: var(--leading-snug);
  letter-spacing: 0;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--step-22);
  line-height: var(--leading-normal);
  margin: 0;
}

.kicker {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--step-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ash-500);
}

.kicker--amber { color: var(--amber); }
.kicker--gold  { color: var(--gold); }
.kicker--on-dark { color: var(--gold); }

p, .body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--step-16);
  line-height: var(--leading-loose);
  color: var(--fg);
  margin: 0;
}

.body--muted   { color: var(--fg-muted); }
.body--small   { font-size: var(--step-14); line-height: var(--leading-relaxed); }
.body--lede    { font-size: var(--step-18); line-height: var(--leading-relaxed); color: var(--fg-muted); }

.price {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--step-22);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.cta-text {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--step-14);
  letter-spacing: var(--tracking-wide);
}

/* Editorial italic — for atmospheric pull-quotes / tags */
.atmos {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: var(--weight-regular);
  color: var(--ash-700);
}

/* ============================================================
   Surfaces — use as utility wrappers
   ============================================================ */

.surface-paper { background: var(--paper); color: var(--ink); }
.surface-paper-deep { background: var(--paper-deep); color: var(--ink); }
.surface-bone  { background: var(--bone);  color: var(--ink); }
.surface-ink   { background: var(--ink);   color: var(--fg-on-dark); }
.surface-bottle{ background: var(--bottle);color: var(--fg-on-dark); }

.surface-ink .kicker,
.surface-bottle .kicker { color: var(--gold); }

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}