/* ============================================================
   Alkimia · Design System · colors_and_type.css
   v1.0 — Mayo 2026
   "El sistema de un billete vintage."
   ============================================================
   USAGE:
     <link rel="stylesheet" href="colors_and_type.css" />
     Load BEFORE component stylesheets. Provides all :root
     custom properties + semantic utility classes.
   ============================================================ */

/* ── Google Fonts import ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Marcellus&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');


/* ============================================================
   DESIGN TOKENS — :root
   ============================================================ */
:root {

  /* ── Color: Greens (canvas / surfaces) ──────────────────── */
  --ink:          #0B1611;   /* footer, deepest shadows */
  --forest:       #14352A;   /* primary background — the bill */
  --bottle:       #1C4636;   /* elevated surfaces, cards */
  --moss:         #2A5A47;   /* lines, hairlines, dividers */
  --sage:         #4A7861;   /* secondary text on green */

  /* ── Color: Gold (scarce accent) ────────────────────────── */
  --gold:         #C9A24B;   /* primary accent — CTA, price, decision# */
  --gold-soft:    #D9B96A;   /* hover states, active hairline */
  --gold-deep:    #8F6F2A;   /* pressed / border on cream sections */

  /* ── Color: Cream (inverse, aged paper) ─────────────────── */
  --bone:         #F1E7CC;   /* inverse surface — testimonials, FAQ */
  --paper:        #E6D9B5;   /* aged paper — borders, stamps */
  --paper-line:   #C9B98A;   /* lines on cream sections */

  /* ── Color: State ───────────────────────────────────────── */
  --rust:         #B85C3A;   /* leaks, traps, negative data ONLY */
  --leaf:         #6FA86F;   /* guarantee, affirmative */

  /* ── Typography ─────────────────────────────────────────── */
  --serif-display: "Cinzel", "Times New Roman", serif;
  --serif-alt:     "Marcellus", "Times New Roman", serif;
  --serif-body:    "Lora", Georgia, serif;
  --mono:          "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ── Type scale (1.25 major third) ──────────────────────── */
  --text-display-xl: 96px;   /* hero H1, solo screen */
  --text-display-l:  72px;   /* section title */
  --text-display:    56px;   /* CTA final, slide deck */
  --text-h2:         40px;   /* section headers */
  --text-h3:         32px;   /* sub-sections */
  --text-h4:         24px;   /* card titles */
  --text-lede:       19px;   /* opening lede paragraph (desktop) */
  --text-body:       17px;   /* base body size (desktop) */
  --text-small:      14px;   /* captions, notes */
  --text-micro:      11px;   /* mono labels, tags, kickers */

  /* ── Line heights ────────────────────────────────────────── */
  --lh-display: 0.96;
  --lh-heading: 1.1;
  --lh-lede:    1.55;
  --lh-body:    1.65;
  --lh-mono:    1.5;

  /* ── Letter spacing ─────────────────────────────────────── */
  --ls-display: -0.005em;
  --ls-heading:  0em;
  --ls-kicker:   0.22em;
  --ls-micro:    0.16em;
  --ls-mono-sm:  0.14em;

  /* ── Spacing (base 4) ───────────────────────────────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ── Border radius ──────────────────────────────────────── */
  --r-0:    0px;    /* default for most cards, blocks */
  --r-1:    2px;    /* subtle (inner badge, countdown cells) */
  --r-2:    4px;    /* buttons */
  --r-3:    8px;    /* sticky CTA container only */
  --r-pill: 999px;  /* badge pills only */

  /* ── Layout ─────────────────────────────────────────────── */
  --col-w:      1160px;   /* main content column */
  --col-narrow:  820px;   /* narrow/reading column */
  --announce-h:   44px;   /* fixed announce bar height */

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-mockup: 0 20px 60px rgba(0, 0, 0, 0.4);
  --shadow-sticky: 0 18px 40px rgba(0, 0, 0, 0.45);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-button:  0.15s ease;
  --ease-reveal:  0.8s cubic-bezier(.2,.7,.2,1);
  --ease-hairline: 1.2s cubic-bezier(.2,.7,.1,1);
}


/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */

/* Display heading — Cinzel, uppercase weight */
.t-display {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--bone);
}
.t-display-xl { font-size: var(--text-display-xl); }
.t-display-l  { font-size: var(--text-display-l); }
.t-display-md { font-size: var(--text-display); }

/* Alt display heading — Marcellus, more legible */
.t-alt {
  font-family: var(--serif-alt);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--bone);
}

/* Body lede */
.t-lede {
  font-family: var(--serif-body);
  font-size: var(--text-lede);
  line-height: var(--lh-lede);
  color: var(--bone);
  opacity: 0.88;
}
.t-lede em     { font-style: italic; color: var(--gold-soft); }
.t-lede strong { font-weight: 500; opacity: 1; }

/* Body */
.t-body {
  font-family: var(--serif-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--bone);
}

/* Kicker — mono uppercase, gold line before */
.t-kicker {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.t-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* Micro — smallest mono label */
.t-micro {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--sage);
}

/* Data / price label */
.t-data {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--gold);
}

/* Price display — large Cinzel number */
.t-price {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: var(--text-display-l);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--gold);
}

/* Italic emphasis — Lora italic in gold-soft */
.t-em {
  font-family: var(--serif-body);
  font-style: italic;
  color: var(--gold-soft);
}


/* ============================================================
   SEMANTIC COLOR CLASSES
   ============================================================ */

/* Surface contexts */
.bg-forest  { background: var(--forest); color: var(--bone); }
.bg-bottle  { background: var(--bottle); color: var(--bone); }
.bg-ink     { background: var(--ink);    color: var(--bone); }
.bg-bone    { background: var(--bone);   color: var(--ink); }
.bg-paper   { background: var(--paper);  color: var(--ink); }

/* Text color utilities */
.text-gold      { color: var(--gold); }
.text-gold-soft { color: var(--gold-soft); }
.text-gold-deep { color: var(--gold-deep); }
.text-bone      { color: var(--bone); }
.text-sage      { color: var(--sage); }
.text-ink       { color: var(--ink); }
.text-rust      { color: var(--rust); }
.text-leaf      { color: var(--leaf); }

/* Selection */
::selection { background: var(--gold); color: var(--ink); }


/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.col        { max-width: var(--col-w);      margin: 0 auto; padding: 0 20px; }
.col-narrow { max-width: var(--col-narrow); margin: 0 auto; padding: 0 20px; }

@media (min-width: 600px) {
  .col, .col-narrow { padding: 0 32px; }
}

/* Section scaffold */
.section-default {
  position: relative;
  padding: 80px 0;
  background: var(--forest);
}
@media (min-width: 960px) {
  .section-default { padding: 128px 0; }
}
.section-bone { background: var(--bone); color: var(--ink); }
.section-ink  { background: var(--ink);  color: var(--bone); }

/* Hairline divider */
.hairline {
  height: 1px;
  background: var(--gold);
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--ease-hairline);
}
.hairline.is-in { transform: scaleX(1); }


/* ============================================================
   BUTTON SYSTEM
   ============================================================ */
.btn {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform var(--ease-button),
              background var(--ease-button),
              color var(--ease-button),
              border-color var(--ease-button),
              box-shadow var(--ease-button);
  border-radius: var(--r-2);
  text-decoration: none;
}
.btn .arr {
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.btn:hover .arr     { transform: translateX(3px); }
.btn:focus-visible  { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

.btn-primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold-deep);
  box-shadow: inset 0 -2px 0 var(--gold-deep);
}
.btn-primary:hover  { background: var(--gold-soft); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--bone);
  border-color: var(--moss);
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold-soft); }

.btn-large { padding: 18px 28px; font-size: 13px; }
@media (min-width: 960px) {
  .btn       { font-size: 13px; padding: 16px 26px; }
  .btn-large { padding: 22px 36px; font-size: 15px; }
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--ease-reveal), transform var(--ease-reveal);
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }


/* ============================================================
   CARD PATTERNS
   ============================================================ */

/* Double-border card (signature Alkimia pattern) */
.card-alkimia {
  background: var(--bottle);
  border: 1px solid var(--gold);
  padding: 32px;
  position: relative;
}
.card-alkimia::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  pointer-events: none;
}

/* Testimonial card */
.card-testimonial {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--paper-line);
  padding: 28px;
  position: relative;
}
.card-testimonial::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--paper-line);
  pointer-events: none;
}

/* Quote callout */
.callout-quote {
  border-left: 3px solid var(--gold);
  padding: 24px 24px 24px 28px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--bottle) 35%, transparent);
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(18px, 4vw, 26px);
  line-height: 1.35;
  letter-spacing: var(--ls-display);
  color: var(--bone);
}


/* ============================================================
   SECTION THEME OVERRIDES (bone sections)
   ============================================================ */
section.bone .t-kicker,
section.bone .t-kicker::before { color: var(--gold-deep); background: var(--gold-deep); }
section.bone .t-display        { color: var(--ink); }
section.bone .t-lede           { color: var(--ink); }
section.bone .t-lede em        { color: var(--gold-deep); }
section.bone .btn-secondary    { color: var(--ink); border-color: var(--paper-line); }
section.bone .btn-secondary:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
section.bone .t-micro          { color: var(--gold-deep); }
section.bone .hairline         { background: var(--gold-deep); opacity: 0.6; }