/* public/css/tokens.css — design tokens extracted from Figma (Cascade — App) */

/* ── Typography ──────────────────────────────────────────────────────────── */

:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-title:      24px;
  --text-heading:    18px;
  --text-region:     16px;
  --text-eyebrow:    12px;
  --text-subheading: 12px;
  --text-label:       9px;
  --text-superscript: 10px; /* NEEDS VALUE — not found in Figma components */
  --text-cta:        12px;

  --weight-medium:   500;
  --weight-semibold: 600;

  --leading-tight: 100%;
  --leading-snug:  16px;

  --tracking-title:      -0.48px;
  --tracking-heading:    -0.36px;
  --tracking-region:     -0.32px;
  --tracking-subheading: -0.24px;
  --tracking-eyebrow:    -0.12px;
  --tracking-label:      -0.14px;
}

/* ── Colors ──────────────────────────────────────────────────────────────── */

:root {
  --color-base:            #FFFFFF;
  --color-primary:         #000000;
  --color-secondary:       rgba(0, 0, 0, 0.54);
  --color-soft-border:     rgba(0, 0, 0, 0.05);
  --color-soft-shade:      #F5F5F5;

  --color-inverse-primary:   #FFFFFF;
  --color-inverse-secondary: rgba(255, 255, 255, 0.6);

  --color-avy-no-rating:  #CCCCCC;
  --color-avy-low:        #70CD32;
  --color-avy-moderate:   #FFDD00;
  --color-avy-considerable: #FF7700;
  --color-avy-high:       #DA2020;
  --color-avy-extreme:    #000000;
  --color-avy-general:    #4AB2F8;

  --color-action:          #2464E8;
}

/* ── Spacing ─────────────────────────────────────────────────────────────── */

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
}