/* =====================================================================
   TeamCook — Colors & Type
   Single source of truth for design tokens. Import this in any HTML:
   <link rel="stylesheet" href="/colors_and_type.css" />
   ===================================================================== */

/* ---------- Fonts ---------- */
/* STAG — display + body headline face (brand book primary family) */
@font-face { font-family: "Stag"; font-style: normal; font-weight: 100; src: url("fonts/Stag-Thin.ttf")     format("truetype"); font-display: swap; }
@font-face { font-family: "Stag"; font-style: normal; font-weight: 300; src: url("fonts/Stag-Light.ttf")    format("truetype"); font-display: swap; }
@font-face { font-family: "Stag"; font-style: normal; font-weight: 400; src: url("fonts/Stag-Regular.ttf")  format("truetype"); font-display: swap; }
@font-face { font-family: "Stag"; font-style: normal; font-weight: 500; src: url("fonts/Stag-Medium.ttf")   format("truetype"); font-display: swap; }
@font-face { font-family: "Stag"; font-style: normal; font-weight: 600; src: url("fonts/Stag-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Stag"; font-style: normal; font-weight: 700; src: url("fonts/Stag-Bold.ttf")     format("truetype"); font-display: swap; }
@font-face { font-family: "Stag"; font-style: normal; font-weight: 900; src: url("fonts/Stag-Black.ttf")    format("truetype"); font-display: swap; }
/* Italics no incluidas en el bundle inicial — agregar si se usan */

/* Inter (Google Fonts) — UI / body fallback used by the React app
   The production site uses Inter via @theme. We keep it here so
   existing component code renders faithfully. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* =====================================================================
   TOKENS
   ===================================================================== */
:root {
  /* ---------- Brand palette (from Paleta de colores.docx) ---------- */
  --tc-lila:         #74568F; /* Purple — brand authority, CTAs, headlines */
  --tc-lila-ink:     #5A4170; /* Darker purple for text on cream */
  --tc-lila-soft:    #B8A6C9; /* Muted lila for borders, subtle fills */
  --tc-lila-wash:    #EDE5F3; /* Palest lila tint — hover bg, cards */

  --tc-cream:        #FAD69E; /* Primary warm — peach/cream, brand bg */
  --tc-cream-soft:   #FCE6BE; /* Lighter cream — sections */
  --tc-cream-wash:   #FFF4E0; /* Palest cream wash */

  --tc-orange:       #FFB86B; /* Accent 2 — energy, highlights */
  --tc-orange-deep:  #FF9F43; /* Sale / warm CTAs */
  --tc-orange-app:   #FF8C42; /* App variant — used in marketing site */

  --tc-sky:          #6BB7FF; /* Complementary — info, links */
  --tc-sky-soft:     #E3F2FD; /* Soft sky for section bgs */

  /* ---------- Neutrals ---------- */
  --tc-ink:          #3A3B3D; /* Text / profundidad (UI body) */
  --tc-ink-soft:     #6A5F75; /* Muted text */
  --tc-neutral:      #F5F5F7; /* UI background / surface */
  --tc-paper:        #FFFBF5; /* Warm off-white page bg (matches app) */
  --tc-white:        #FFFFFF;
  --tc-black:        #2D2435; /* Plum-black — preferred over pure black */

  /* ---------- Semantic ---------- */
  --tc-success:      #2ECC71;
  --tc-danger:       #D14F4F;
  --tc-warning:      #F39C12;
  --tc-info:         #6BB7FF;

  /* ---------- Foreground / background aliases ---------- */
  --fg-1: var(--tc-ink);           /* primary text */
  --fg-2: var(--tc-ink-soft);      /* muted text */
  --fg-3: #9A8FA5;                 /* hint / caption */
  --fg-inv: var(--tc-white);       /* on dark/brand bgs */
  --fg-brand: var(--tc-lila);      /* brand-colored text */

  --bg-page:    var(--tc-paper);
  --bg-surface: var(--tc-white);
  --bg-muted:   var(--tc-neutral);
  --bg-brand:   var(--tc-cream);
  --bg-accent:  var(--tc-lila);

  --border-soft:   #EEE6D6;
  --border-brand:  rgba(116, 86, 143, 0.2);
  --border-strong: rgba(116, 86, 143, 0.4);

  /* ---------- Radii (playful, generous; matches app --radius:1.25rem) ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;   /* default card */
  --radius-xl: 28px;   /* hero cards, video frames */
  --radius-2xl: 40px;
  --radius-pill: 999px;

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

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(58, 59, 61, 0.05);
  --shadow-sm: 0 2px 6px rgba(116, 86, 143, 0.08);
  --shadow-md: 0 8px 20px rgba(116, 86, 143, 0.12);
  --shadow-lg: 0 16px 40px rgba(116, 86, 143, 0.16);
  --shadow-xl: 0 24px 60px rgba(116, 86, 143, 0.22);
  --shadow-cta: 0 8px 20px rgba(255, 140, 66, 0.4);

  /* ---------- Signature gradients ---------- */
  --grad-warm:  linear-gradient(135deg, #FF8C42 0%, #FFB366 100%);
  --grad-brand: linear-gradient(135deg, #FAD69E 0%, #74568F 100%);
  --grad-hero:  linear-gradient(135deg, rgba(250,214,158,.35) 0%, rgba(255,255,251,1) 50%, rgba(116,86,143,.12) 100%);
  --grad-lila:  linear-gradient(135deg, #74568F 0%, #B8A6C9 100%);

  /* ---------- Type families ---------- */
  --font-display: "Stag", "Inter", system-ui, sans-serif; /* playful brand headlines */
  --font-ui:      "Inter", system-ui, sans-serif;         /* app body */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---------- Type scale ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  52px;
  --fs-5xl:  68px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   Apply by wrapping content in `.tc` or use classes directly.
   ===================================================================== */

.tc, .tc-root {
  color: var(--fg-1);
  background: var(--bg-page);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — Stag Black, brand / hero */
.tc-display, h1.tc-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--tc-lila);
}

.tc-h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.tc-h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-3xl); line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); }
.tc-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: var(--lh-snug); }
.tc-h4 { font-family: var(--font-ui);      font-weight: 800; font-size: var(--fs-xl);  line-height: var(--lh-snug); }
.tc-h5 { font-family: var(--font-ui);      font-weight: 700; font-size: var(--fs-lg);  line-height: var(--lh-snug); }

.tc-eyebrow {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--tc-lila);
}

.tc-lead { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--fg-2); font-weight: 500; }
.tc-body { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-1); }
.tc-small { font-size: var(--fs-sm); color: var(--fg-2); }
.tc-caption { font-size: var(--fs-xs); color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 700; }

.tc-code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--tc-lila-wash);
  color: var(--tc-lila-ink);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* ---------- Primitives ---------- */
.tc-card {
  background: var(--bg-surface);
  border: 2px solid var(--border-brand);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.tc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 800;
  padding: 14px 26px; border-radius: var(--radius-pill);
  border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-size: var(--fs-base);
}
.tc-btn--primary { background: var(--grad-warm); color: #fff; box-shadow: var(--shadow-cta); }
.tc-btn--primary:hover { transform: translateY(-2px); }
.tc-btn--brand { background: var(--tc-lila); color: #fff; }
.tc-btn--brand:hover { background: var(--tc-lila-ink); }
.tc-btn--ghost { background: transparent; color: var(--tc-lila); border: 2px solid var(--border-strong); }
.tc-btn--ghost:hover { background: var(--tc-lila-wash); }

/* ---------- Utilities ---------- */
.tc-swatch { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-md); }
.tc-ring-brand { box-shadow: 0 0 0 2px var(--border-brand); }

/* ---------- Global viewport scaling ----------
   En pantallas grandes el sitio queda mas compacto/editorial.
   Mobile y laptops chicas no se tocan. */
@media (min-width: 1440px) and (max-width: 1919.98px) {
  html { zoom: 0.85; }
}
@media (min-width: 1920px) {
  html { zoom: 0.80; }
}

/* ---------- Disable AOS reveal animations ----------
   AOS no se lleva bien con el zoom global (drift de posiciones).
   Forzamos todo visible desde el inicio. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}