/* ════════════════════════════════════════════════
   ARIA — colors_and_type.css
   Drop-in CSS tokens. Base + semantic.
   ════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light only;

  /* ─── BASE COLOR TOKENS ─────────────────────── */
  --aria-black:    #0a0a0a;   /* primary text, CTAs */
  --aria-white:    #ffffff;   /* page bg */

  --aria-bg-1:     #fafafa;   /* chat body, softest inset */
  --aria-bg-2:     #f8f8f8;   /* inset panels, hover bg */
  --aria-bg-3:     #f5f5f5;   /* mid-gray fill, gray chip bg */
  --aria-bg-4:     #f0f0f0;   /* darker inset, active nav */

  --aria-border:   #e8e8e8;   /* default 1px border */
  --aria-border-2: #d0d0d0;   /* interactive / hoverable border */

  --aria-muted:    #6b6b6b;   /* secondary text */
  --aria-hint:     #aaaaaa;   /* hint text, inactive */

  /* ─── SEMANTIC COLORS (status only) ─────────── */
  --aria-green:    #16a34a;   --aria-green-bg: #f0fdf4;
  --aria-red:      #dc2626;   --aria-red-bg:   #fef2f2;   --aria-red-border: #fecaca;
  --aria-amber:    #b45309;   --aria-amber-bg: #fffbeb;
  --aria-yellow:   #854d0e;   --aria-yellow-bg:#fef9c3;   /* GOLD tier */
  --aria-bronze:   #92400e;   --aria-bronze-bg:#fef3c7;   /* BRONZE tier */
  --aria-blue:     #1d4ed8;   --aria-blue-bg:  #eff6ff;
  --aria-live:     #22c55e;   /* live/active dot */

  /* ─── FONT FAMILIES ─────────────────────────── */
  --aria-font-sans:   'Geist', system-ui, -apple-system, sans-serif;
  --aria-font-mono:   'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --aria-font-serif:  'Instrument Serif', Georgia, serif;

  /* ─── TYPE SCALE (base sizes) ───────────────── */
  --aria-fs-9:   9px;
  --aria-fs-10: 10px;
  --aria-fs-11: 11px;
  --aria-fs-12: 12px;
  --aria-fs-13: 13px;
  --aria-fs-14: 14px;
  --aria-fs-15: 15px;
  --aria-fs-17: 17px;
  --aria-fs-18: 18px;
  --aria-fs-20: 20px;
  --aria-fs-22: 22px;
  --aria-fs-24: 24px;
  --aria-fs-28: 28px;
  --aria-fs-36: 36px;
  --aria-fs-44: 44px;
  --aria-fs-56: 56px;
  --aria-fs-72: 72px;
  --aria-fs-76: 76px;

  /* ─── SPACING / RADII / ELEVATION ───────────── */
  --aria-r-xs:  4px;   /* badge */
  --aria-r-sm:  6px;   /* chip, small btn */
  --aria-r-md:  8px;   /* button, input */
  --aria-r-lg: 10px;   /* card */
  --aria-r-xl: 12px;   /* large card, toast */
  --aria-r-2xl:16px;   /* pricing wrap */
  --aria-r-pill: 9999px;

  --aria-shadow-toast: 0 10px 30px rgba(0,0,0,0.25);
  --aria-shadow-sidebar: 0 0 20px rgba(0,0,0,0.06);
  --aria-focus-ring: 0 0 0 3px rgba(10,10,10,0.08);

  --aria-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --aria-dur-fast: 0.15s;
  --aria-dur-med:  0.3s;
  --aria-dur-slow: 0.6s;

  /* ─── SEMANTIC TYPE VARIABLES ───────────────── */
  /* Default foreground / background */
  --fg-1: var(--aria-black);
  --fg-2: var(--aria-muted);
  --fg-3: var(--aria-hint);
  --bg-page: var(--aria-white);
  --bg-inset: var(--aria-bg-2);

  /* Headline fonts */
  --font-display: var(--aria-font-sans);
  --font-italic-accent: var(--aria-font-serif);
  --font-body: var(--aria-font-sans);
  --font-code: var(--aria-font-mono);
}

/* ════════════════════════════════════════════════
   SEMANTIC CLASSES
   ════════════════════════════════════════════════ */

body.aria, .aria-root {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--fg-1);
  font-size: var(--aria-fs-15);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.aria-h1, .aria h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 600;
  letter-spacing: -2.5px;
  line-height: 1.05;
  color: var(--fg-1);
}
.aria-h1 em, .aria h1 em {
  font-family: var(--font-italic-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -1px;
}

.aria-h2, .aria h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--fg-1);
}
.aria-h2 em, .aria h2 em {
  font-family: var(--font-italic-accent);
  font-style: italic;
  font-weight: 400;
}

.aria-h3 {
  font-family: var(--font-display);
  font-size: var(--aria-fs-24);
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

.aria-card-title {
  font-size: var(--aria-fs-13);
  font-weight: 600;
  letter-spacing: -0.1px;
}

.aria-eyebrow, .aria-section-tag {
  font-size: var(--aria-fs-11);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.aria-label {
  font-size: var(--aria-fs-11);
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.aria-body {
  font-size: var(--aria-fs-15);
  line-height: 1.6;
  color: var(--fg-1);
}

.aria-body-sm {
  font-size: var(--aria-fs-13);
  line-height: 1.6;
  color: var(--fg-2);
}

.aria-hint {
  font-size: var(--aria-fs-12);
  color: var(--fg-3);
}

.aria-code, .aria code, .aria-mono {
  font-family: var(--font-code);
  font-size: var(--aria-fs-12);
}

.aria-stat-num {
  font-size: var(--aria-fs-36);
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--fg-1);
}
.aria-stat-num span, .aria-stat-num em {
  font-family: var(--font-italic-accent);
  font-style: italic;
  font-weight: 400;
}

.aria-price-big {
  font-size: var(--aria-fs-72);
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 1;
}
.aria-price-big span {
  font-family: var(--font-italic-accent);
  font-style: italic;
  font-weight: 400;
}