@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;1,400&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --brand: #E30200;
  --brand-dark: #B80000;
  --brand-subtle: rgba(227, 2, 0, 0.08);
  --gradient-brand: linear-gradient(135deg, #E30200 0%, #B80000 100%);

  /* Neutral */
  --ink: #222221;
  --muted: #737373;
  --line: #E5E7EB;
  --surface: #FFFFFF;
  --paper: #F9FAFB;
  --surface-soft: #F3F4F6;
  --gradient-panel-dark: linear-gradient(180deg, #222221 0%, #333332 100%);
  --gradient-surface: linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%);

  /* Typography */
  --font-headline: 'Barlow Condensed', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-label: 'Space Grotesk', sans-serif;

  /* Shadows */
  --shadow: 0 4px 24px rgba(34, 34, 33, 0.10);
  --shadow-card: 0 1px 4px rgba(34, 34, 33, 0.08);
  --shadow-button: 0 4px 12px rgba(227, 2, 0, 0.28);

  /* Radius */
  --radius-card: 4px;
  --radius-panel: 4px;
  --radius-pill: 4px;
  --radius-input: 0px;
  --radius-button: 4px;
}