/* Design Tokens */
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap");

:root {
  /* Typography */
  --font-family-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.25rem;
  --leading-tight: 1.25;
  --leading-normal: 1.6;

  /* Spacing Scale */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */

  /* Radii */
  --radius-1: 0.375rem;
  --radius-2: 0.75rem;
  --radius-3: 1.5rem;

  /* Palette */
  --color-background: #2d5d9f;
  --color-primary-fill: #ec6338;
  --color-primary-text: #ffffff;
  --color-primary-border: #d95529;

  --color-neutral-fill: rgba(255, 255, 255, 0.12);
  --color-neutral-text: #ffffff;
  --color-neutral-border: rgba(255, 255, 255, 0.2);

  --color-success-fill: #1f8a4d;
  --color-success-text: #f0fff4;
  --color-success-border: #166534;

  --color-warning-fill: #ecb038;
  --color-warning-text: #1f1200;
  --color-warning-border: #c48a14;

  --color-danger-fill: #d14343;
  --color-danger-text: #fff5f5;
  --color-danger-border: #9f2a2a;

  --color-surface: rgba(255, 255, 255, 0.18);
  --color-surface-strong: rgba(0, 0, 0, 0.2);
  --color-surface-inverse: #ffffff;

  /* Elevation */
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.28);
  --z-overlay: 1000;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-md);
  line-height: var(--leading-normal);
  color: var(--color-surface-inverse);
  background-color: var(--color-background);
  margin: 0;
}