/* Huatop design tokens.
   Source: current style reference (warm bone-white canvas, one electric violet
   conversion colour, chartreuse as the single receipt accent, Plus Jakarta Sans
   for display + Inter for UI/body). */
:root {
  /* Typography — families */
  --font-display: "Plus Jakarta Sans", Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Colors */
  --color-electric-violet: #4823ff;
  --color-voltage-mid: #7e78ff;
  --color-iris-accent: #6d67fb;
  --color-lilac-wash: #ede9ff;
  --color-periwinkle-border: #d9d2ff;
  --color-chartreuse-receipt: #e7ff6e;
  --color-powder-blue: #99cefe;
  --color-bone-canvas: #fafaf8;
  --color-paper-white: #ffffff;
  --color-obsidian-ink: #18161a;
  --color-carbon-border: #333333;
  --color-graphite: #222222;
  --color-slate-helper: #898b91;
  --color-lavender-gray: #9e99ab;
  --color-midnight-surface: #1e1b22;

  /* Semantic aliases */
  --color-ink: var(--color-obsidian-ink);
  --color-background: var(--color-bone-canvas);
  --color-surface: var(--color-paper-white);
  --color-surface-tint: var(--color-lilac-wash);
  --color-border: var(--color-periwinkle-border);
  --color-border-soft: var(--color-lilac-wash);
  --color-primary: var(--color-electric-violet);
  --color-accent: var(--color-chartreuse-receipt);
  --color-focus: var(--color-electric-violet);

  /* Type scale */
  --text-caption: 11px;
  --leading-caption: 1.4;
  --tracking-caption: 0.05em;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.001em;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.01em;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.02em;
  --text-heading: 31px;
  --leading-heading: 1.2;
  --tracking-heading: -0.032em;
  --text-display: clamp(40px, 6vw, 77px);
  --leading-display: 1;
  --tracking-display: -0.04em;

  /* Spacing (base unit 4px) */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-84: 84px;

  /* Layout */
  --page-max: 1200px;
  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 20px;
  --page-gutter: clamp(1rem, 3.5vw, 2.5rem);
  --space-section: clamp(4rem, 8vw, 7.5rem);

  /* Border radius */
  --radius-small: 12px;
  --radius-card: 20px;
  --radius-icon: 50px;
  --radius-pill: 100px;
  --radius-tag: 999px;
}