/* Plassic Design Tokens — CSS variables
 * Theme: Tropic Static (Kraft edition)
 * Generated 04 May 2026
 */
:root {
  /* ============ COLOR ============ */
  --plassic-kraft-50: #e8dcc4; /* primary light surface */
  --plassic-kraft-100: #ded1b6;
  --plassic-bone-200: #dcd3bd; /* lines / dividers on kraft */
  --plassic-bone-300: #c4b59a;
  --plassic-jungle-950: #0e2a26; /* primary dark surface, body ink */
  --plassic-jungle-800: #15403a;
  --plassic-jungle-700: #1f574f;
  --plassic-coral-500: #ff5e3a; /* alert / High-score / CTA */
  --plassic-coral-600: #e84b26;
  --plassic-teal-500: #1f8c7e; /* Clean/Good score, trust */
  --plassic-teal-400: #34a99a;
  --plassic-mute-400: #6e6856; /* captions, disabled */
  --plassic-line-200: #c4b59a; /* hairline on kraft */
  --plassic-line-800: #1a3a35; /* hairline on jungle */

  /* Score bands (the only "traffic light") */
  --plassic-band-clean-bg: var(--plassic-teal-500);
  --plassic-band-clean-fg: var(--plassic-kraft-50);
  --plassic-band-low-bg: var(--plassic-kraft-50);
  --plassic-band-low-fg: var(--plassic-jungle-950);
  --plassic-band-medium-bg: var(--plassic-coral-500);
  --plassic-band-medium-fg: var(--plassic-jungle-950);
  --plassic-band-high-bg: var(--plassic-jungle-950);
  --plassic-band-high-fg: var(--plassic-coral-500);

  /* Semantic */
  --plassic-bg: var(--plassic-kraft-50);
  --plassic-fg: var(--plassic-jungle-950);
  --plassic-surface: var(--plassic-jungle-950);
  --plassic-surface-fg: var(--plassic-kraft-50);
  --plassic-accent: var(--plassic-coral-500);
  --plassic-accent-2: var(--plassic-teal-500);

  /* ============ TYPE ============ */
  --plassic-font-display: "Archivo Black", "Helvetica Neue", sans-serif;
  --plassic-font-body: "Inter", system-ui, sans-serif;
  --plassic-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --plassic-text-display-hero: 120px; /* score number, scales up to 240 on share */
  --plassic-lh-display-hero: 1;
  --plassic-text-display-1: 56px;
  --plassic-lh-display-1: 60px;
  --plassic-text-display-2: 36px;
  --plassic-lh-display-2: 40px;
  --plassic-text-title-1: 24px;
  --plassic-lh-title-1: 28px;
  --plassic-text-title-2: 20px;
  --plassic-lh-title-2: 24px;
  --plassic-text-body-1: 16px;
  --plassic-lh-body-1: 24px;
  --plassic-text-body-2: 14px;
  --plassic-lh-body-2: 20px;
  --plassic-text-caption: 12px;
  --plassic-lh-caption: 16px;
  --plassic-text-mono-1: 14px;
  --plassic-lh-mono-1: 20px;

  /* ============ SPACING (4pt base) ============ */
  --plassic-space-1: 4px;
  --plassic-space-2: 8px;
  --plassic-space-3: 12px;
  --plassic-space-4: 16px;
  --plassic-space-5: 20px;
  --plassic-space-6: 24px;
  --plassic-space-8: 32px;
  --plassic-space-10: 40px;
  --plassic-space-12: 48px;
  --plassic-space-16: 64px;

  /* ============ RADIUS ============ */
  --plassic-radius-sm: 8px;
  --plassic-radius-md: 16px;
  --plassic-radius-lg: 24px;
  --plassic-radius-pill: 9999px;

  /* ============ MOTION ============ */
  --plassic-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --plassic-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --plassic-dur-quick: 200ms;
  --plassic-dur-base: 350ms;
  --plassic-dur-score-reveal: 600ms;
}

/* Reduced motion — score reveal degrades to fade */
@media (prefers-reduced-motion: reduce) {
  :root {
    --plassic-dur-quick: 0ms;
    --plassic-dur-base: 0ms;
    --plassic-dur-score-reveal: 0ms;
  }
}