/* =============================================
   EL ARCHIBRAZO · COLORS + TYPE
   Single source of truth for the design system.
   Import this file before anything else.
   ============================================= */

/* ---- Fonts: Andralis ND (display, the brand's serif named after Juan Andralis, by Ruben Fontana) */
@font-face {
  font-family: 'AndralisND';
  src: url('../fonts/AndralisND-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AndralisND';
  src: url('../fonts/AndralisND-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'AndralisND';
  src: url('../fonts/AndralisND-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Fonts: Manrope (UI/body sans) + JetBrains Mono (technical meta) loaded via Google Fonts:
   @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
*/

:root {
  /* ====== COLOR TOKENS ====== */

  /* Base dark (fondos + superficies) */
  --black:        #0a0a0a;   /* body background, absolute base */
  --night:        #161616;   /* card / elevated surface */
  --night-2:      #1c1c1c;   /* hover / nested surface */
  --line:         #242424;   /* divider / border */
  --line-2:       #3a3a3a;   /* secondary border / outline */

  /* Acentos vivos (banner del Archi) */
  --pink:         #ff3d7f;   /* primary accent, CTAs */
  --orange:       #ff8a3d;   /* warm accent, links, secondary */
  --magenta-deep: #c8259a;   /* deep variant, blob */
  --gradient:      linear-gradient(95deg,  #ff3d7f 0%, #ff8a3d 100%);
  --gradient-soft: linear-gradient(135deg, rgba(255,61,127,0.18) 0%, rgba(255,138,61,0.10) 100%);

  /* Estados (status) */
  --green:        #34d399;   /* success, disponible */
  --green-deep:   #0f2a1e;
  --amber:        #fbbf24;   /* warning, pendiente */
  --amber-deep:   #26200d;
  --red:          #f87171;   /* error, agotado */
  --red-deep:     #241619;

  /* Cream (neutros tibios sobre dark) */
  --cream:        #f5f1ea;   /* headlines, primary text */
  --cream-soft:   #d6cfc1;   /* body / paragraphs */
  --muted:        #a8a29e;   /* meta / secondary */
  --muted-2:      #6f6a63;   /* footer / tertiary */
  --muted-3:      #8a8378;   /* extra subtle */

  /* Semantic / role aliases (use these in components when possible) */
  --bg:           var(--black);
  --bg-elev:      var(--night);
  --bg-elev-2:    var(--night-2);
  --fg:           var(--cream);
  --fg-body:      var(--cream-soft);
  --fg-mute:      var(--muted);
  --fg-mute-2:    var(--muted-2);
  --border:       var(--line);
  --border-2:     var(--line-2);
  --accent:       var(--pink);
  --accent-warm:  var(--orange);
  --selection-bg: var(--pink);
  --selection-fg: var(--cream);

  /* ====== TYPOGRAPHY ====== */

  --font-display: 'AndralisND', 'Times New Roman', Georgia, serif;
  --font-body:    'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', monospace;

  /* Size scale (fluid where useful) */
  --t-display:    clamp(40px, 6vw, 84px);    /* hero headlines */
  --t-h1:         clamp(34px, 4.5vw, 56px);  /* page titles */
  --t-h2:         clamp(28px, 3vw, 36px);    /* section titles */
  --t-h3:         22px;                      /* subheadings */
  --t-eyebrow:    11px;                      /* uppercase labels */
  --t-body:       16px;                      /* default body */
  --t-small:      13px;                      /* meta */
  --t-tiny:       11px;                      /* fine print, mono */

  /* Line-heights */
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  /* Letter-spacing */
  --ls-tight:     -0.02em;
  --ls-caps:      0.16em;

  /* ====== RADII ====== */
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ====== SHADOWS / GLOWS ====== */
  --shadow-card:  0 8px 40px rgba(0,0,0,0.45);
  --shadow-card-lg: 0 20px 50px rgba(0,0,0,0.5);
  --shadow-glow:  0 12px 40px rgba(255,61,127,0.25);
  --shadow-glow-strong: 0 12px 32px rgba(255,61,127,0.45);

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

  /* ====== MOTION ====== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.85, 0);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:     0.18s;
  --t-base:     0.25s;
  --t-slow:     0.4s;
}

/* ====== SEMANTIC ELEMENT STYLES ======
   Drop-in defaults so you can use plain HTML tags without
   reaching for utility classes.
*/

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  font-weight: 600;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { color: var(--fg-body); line-height: var(--lh-relaxed); }
a { color: var(--orange); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--pink); }

small, .meta { font-size: var(--t-small); color: var(--fg-mute); }
code, kbd, pre { font-family: var(--font-mono); font-size: var(--t-tiny); color: var(--orange); letter-spacing: 0.02em; }
em, i { font-style: italic; }
strong, b { font-weight: 700; color: var(--fg); }

/* Selection */
::selection { background: var(--selection-bg); color: white; }

/* Custom scrollbar (subtle, on dark) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--pink); }

/* Focus visible: pink ring, not browser default */
:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Eyebrow util */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--pink);
}

/* Display headline (Andralis showpiece) */
.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  font-weight: 600;
}

/* Gradient text on accent */
.accent-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}