/* ============================================================
   GlassMeta Chile — Design Tokens
   Dark-first, premium tech aesthetic (Ray-Ban Meta × Apple × Tesla)
   ============================================================ */

@font-face {
  font-family: "Mark Pro";
  src: url("./fonts/Mark-Pro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color — Neutrals (dark-first) ---------- */
  --bg-0:        #000000;  /* absolute black, hero / page base */
  --bg-1:        #07090d;  /* section base */
  --bg-2:        #0d1218;  /* elevated card */
  --bg-3:        #141a23;  /* popover / input */
  --bg-4:        #1c2430;  /* hover elevation */
  --line-1:      rgba(255,255,255,0.06);  /* hairline borders */
  --line-2:      rgba(255,255,255,0.12);
  --line-3:      rgba(255,255,255,0.22);

  /* ---------- Color — Foreground ---------- */
  --fg-1:        #ffffff;                 /* primary text, headlines */
  --fg-2:        rgba(255,255,255,0.72);  /* body text */
  --fg-3:        rgba(255,255,255,0.48);  /* secondary / captions */
  --fg-4:        rgba(255,255,255,0.30);  /* disabled / placeholder */

  /* ---------- Color — Brand accents ---------- */
  /* Meta-adjacent electric blue, used sparingly for glow + CTAs */
  --accent-blue:        #0A84FF;  /* primary CTA */
  --accent-blue-hi:     #3DA1FF;  /* hover / gradient stop */
  --accent-blue-deep:   #0050D1;  /* pressed */
  --accent-cyan:        #5EE6FF;  /* AI glow highlight */
  --accent-violet:      #6A5BFF;  /* secondary accent, AI halo */

  /* Chilean flag touch (logo references Chile flag) — used in badges only */
  --chile-red:          #D52B1E;

  /* ---------- Color — Semantic ---------- */
  --success:     #30D158;
  --warning:     #FFB020;
  --danger:      #FF453A;
  --info:        var(--accent-blue);

  /* ---------- Gradients ---------- */
  --grad-hero:       radial-gradient(1200px 600px at 20% 0%, rgba(10,132,255,0.28), transparent 60%),
                     radial-gradient(900px 500px at 85% 30%, rgba(106,91,255,0.22), transparent 60%),
                     linear-gradient(180deg, #000 0%, #05070b 100%);
  --grad-cta:        linear-gradient(135deg, #0A84FF 0%, #3DA1FF 50%, #5EE6FF 100%);
  --grad-card:       linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --grad-border:     linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  --grad-chrome:     linear-gradient(180deg, #1c2430 0%, #0d1218 100%);
  --grad-ai-halo:    conic-gradient(from 180deg at 50% 50%, #0A84FF, #5EE6FF, #6A5BFF, #0A84FF);

  /* ---------- Shadows / Glow ---------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55);
  --shadow-xl:   0 40px 100px rgba(0,0,0,0.65);
  --glow-blue:   0 0 0 1px rgba(10,132,255,0.35), 0 10px 40px rgba(10,132,255,0.35);
  --glow-cyan:   0 0 40px rgba(94,230,255,0.35);
  --inner-hi:    inset 0 1px 0 rgba(255,255,255,0.08);

  /* ---------- Radii ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

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

  /* ---------- Typography families ---------- */
  --font-display: "Mark Pro", "SF Pro Display", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "SF Pro Text", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-hero:    clamp(56px, 9vw, 128px);   /* hero headlines */
  --fs-display: clamp(40px, 5vw, 72px);    /* section headlines */
  --fs-h1:      40px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-xs:      12px;

  /* ---------- Line-heights ---------- */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

  /* ---------- Letter-spacing ---------- */
  --tracking-hero:  -0.04em;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;
  --tracking-xwide: 0.18em;

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     140ms;
  --dur-base:     240ms;
  --dur-slow:     520ms;

  /* ---------- Layout ---------- */
  --container:    1280px;
  --container-narrow: 960px;
  --header-h:     72px;
}

/* ---------- Semantic resets + base ---------- */
html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic text roles ---------- */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: 700;
  color: var(--fg-1);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
.t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }
.t-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; line-height: var(--lh-snug); }
.t-h4 { font-family: var(--font-body);    font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }
.t-body      { font-size: var(--fs-body);  line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-small     { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-3); }
.t-caption   { font-size: var(--fs-xs);    line-height: var(--lh-normal); color: var(--fg-3); }
.t-eyebrow   { font-size: var(--fs-xs);    font-weight: 600; letter-spacing: var(--tracking-xwide); text-transform: uppercase; color: var(--accent-cyan); }
.t-mono      { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--fg-2); }
.t-price     { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); }

/* Utility: AI/blue gradient text */
.t-grad {
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}