/* Design Tokens (Foundations) */

/* Import primary typeface (Atkinson Hyperlegible Next) */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;700&display=swap');

@layer tokens {
:root {
  /* Color Palette */
  --color-primary: #000000; /* Actions | HSB(230,70%,80%) */
  --color-heading: #141A33; /* Darkest variation / headings | HSB(230,60%,20%) */
  --color-text-body: #505673; /* Dark variation / body text | HSB(230,30%,45%) */
  --color-text-muted: #7B83A5; /* Muted/caption text */
  --color-border: #878CA8; /* Medium variation / structural border | HSB(230,20%,66%) */
  --color-border-decorative: #DADEF2; /* Light variation / decorative border | HSB(230,10%,95%) */
  --color-surface: #F5F6FA; /* Lightest variation / card background / alternate bg | HSB(230,2%,98%) */
  --color-page-bg: #FFFFFF; /* Main background (White) | HSB(0,0%,100%) */
  --color-text-body-inverted: #FFFFFF; /* Text color in dark backgrounds | HSB(0,0%,100%) */
  /* Common interactive state */
  --color-primary-hover: #505152; /* Hover shade for primary actions */

  /* Status Colors */
  --color-success: #219653;
  --color-warning: #F2994A;
  --color-alert: #D64545;

  /* Typography */
  --font-family-sans: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Type Scale (Augmented Fourth ~1.414 ratio, Base = 18px => 1.125rem) */
  /* Downward steps (divide by 1.414), Upward steps (multiply by 1.414) */
  --font-size-xs: 0.5625rem;   /* 9px  (18 / 1.414^2) */
  --font-size-sm: 0.8rem;      /* 12.8px (~18 / 1.414) */
  --font-size-base: 1.125rem;  /* 18px (BASE) */
  --font-size-md: 1.6rem;      /* 25.6px (18 * 1.414) */
  --font-size-lg: 2.25rem;     /* 36px  (18 * 1.414^2) */
  --font-size-xl: 3.2rem;      /* 51.2px (18 * 1.414^3) */
  --font-size-2xl: 4.5rem;     /* 72px  (18 * 1.414^4) */

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-round: 50%;

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

  /* Motion */
  --transition-base: 150ms ease-in-out;

  /* Elevation */
  --elevation-card: 0 1px 2px rgba(20, 26, 51, 0.06), 0 2px 6px rgba(20, 26, 51, 0.05);

  /* Component-specific */
  --score-ring-thickness: 8px;

  /* --------------------------------------------- */
  /* Patient Dashboard (component) tokens           */
  /* Use these for dashboard-only measurements to   */
  /* keep styles configurable without touching CSS. */
  /* --------------------------------------------- */
  --pd-score-diameter: 120px;
  --pd-score-diameter-sm: 100px;
  --pd-avatar-size: 80px;
  --pd-calendar-button-size: 36px;
  --pd-chart-min-height: 250px;
  --pd-event-item-width: 120px;
}
}