/* =============================================================
   VYRAL DESIGN SYSTEM — colors_and_type.css
   Tokens for color, type, radius, shadow, spacing.
   Brand: hot red (#FF0000) on sugar pink (#FFECF4).
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Crushed&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ---------- BRAND ---------- */
  --brand-red:        #FF0000;
  --brand-red-hover:  #D90000;   /* hover/active darker */
  --brand-red-press:  #B30000;   /* pressed */
  --brand-pink:       #FFECF4;   /* primary surface */
  --brand-pink-deep:  #FFD3E3;   /* hovered pink surface */
  --brand-ink:        #1A0A10;   /* warm near-black */

  /* ---------- NEUTRALS (warm, pinkish-grey) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FBF6F8;
  --neutral-100: #F3EAEE;
  --neutral-200: #E6D6DD;
  --neutral-300: #C9B5BD;
  --neutral-400: #998087;
  --neutral-500: #6E595F;
  --neutral-600: #4A383D;
  --neutral-700: #2E2024;
  --neutral-800: #1F1418;
  --neutral-900: #14090C;

  /* ---------- SEMANTIC TEXT ---------- */
  --fg:          var(--brand-ink);
  --fg-muted:    #6E595F;        /* neutral-500 */
  --fg-subtle:   #998087;        /* neutral-400 */
  --fg-on-red:   #FFECF4;        /* pink-on-red for contrast */
  --fg-inverse:  #FFECF4;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:          var(--brand-pink);
  --bg-elevated: #FFFFFF;
  --bg-sunken:   #FBE0EB;
  --bg-inverse:  var(--brand-ink);
  --surface-red: var(--brand-red);

  /* ---------- BORDERS ---------- */
  --border:         rgba(26, 10, 16, 0.10);
  --border-strong:  rgba(26, 10, 16, 0.18);
  --border-on-red:  rgba(255, 236, 244, 0.25);
  --ring:           var(--brand-red);

  /* ---------- SEMANTIC STATE ---------- */
  --success:      #1F9D55;
  --success-bg:   #DCF5E7;
  --warning:      #E0A100;
  --warning-bg:   #FFF1C8;
  --danger:       #C8001A;       /* deeper than brand red */
  --danger-bg:    #FFD9DE;
  --info:         #2D6CDF;
  --info-bg:      #D8E6FB;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Crushed", "Bebas Neue", "Anton", Impact, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE (px) ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  88px;
  --fs-7xl:  120px;

  /* ---------- TYPE WEIGHTS ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-display: 0.90;
  --lh-tight:   1.10;
  --lh-snug:    1.30;
  --lh-body:    1.50;
  --lh-loose:   1.65;

  /* ---------- LETTER SPACING ---------- */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* ---------- SPACING (8px base) ---------- */
  --space-0:  0;
  --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;

  /* ---------- RADII ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (soft, warm-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 10, 16, 0.06), 0 1px 3px rgba(26, 10, 16, 0.04);
  --shadow-md: 0 4px 8px rgba(26, 10, 16, 0.06), 0 8px 16px rgba(26, 10, 16, 0.06);
  --shadow-lg: 0 12px 24px rgba(26, 10, 16, 0.10), 0 24px 48px rgba(26, 10, 16, 0.08);
  --shadow-pop: 0 8px 32px rgba(255, 0, 0, 0.18);   /* red glow for hero CTAs */

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0.2, 0.9, 0.4);
  --ease-std:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  240ms;

  /* ---------- ICON SIZES ---------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
}

/* ---------- DARK MODE ---------- */
[data-theme="dark"] {
  --bg:          #14090C;
  --bg-elevated: #1F1418;
  --bg-sunken:   #0C0407;
  --fg:          #FFECF4;
  --fg-muted:    #C9B5BD;
  --fg-subtle:   #998087;
  --border:        rgba(255, 236, 244, 0.12);
  --border-strong: rgba(255, 236, 244, 0.22);
}

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

html, body { font-family: var(--font-body); color: var(--fg); background: var(--bg); }

.t-display-hero,
h1.hero {
  font-family: var(--font-display);
  font-size: clamp(64px, 11vw, var(--fs-7xl));
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  color: var(--brand-red);
}

.t-display, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}

.t-h1, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.t-h2, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.t-h3, h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
}

.t-body, p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--fg);
}

.t-body-lg { font-size: var(--fs-lg); line-height: var(--lh-body); }
.t-body-sm { font-size: var(--fs-sm); line-height: var(--lh-body); }

.t-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

.t-eyebrow, .t-overline {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
}

.t-money {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-red);
  font-variant-numeric: tabular-nums;
}

.t-mono, code, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}