/* 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 - Supportive Green */
    --color-primary: hsl(150, 25%, 25%);      /* Actions */
  --color-heading: hsl(150, 25%, 20%);      /* Darkest variation / headings */
  --color-text-body: hsl(150, 15%, 35%);    /* Dark variation / body text */
  --color-text-muted: hsl(150, 10%, 55%);   /* Muted/caption text */
  --color-border: hsl(150, 15%, 80%);       /* Medium variation / structural border */
  --color-border-decorative: hsl(150, 20%, 92%); /* Light variation / decorative border*/
  --color-surface: hsl(150, 25%, 97%);      /* Lightest variation / card background */
  --color-page-bg: hsl(0, 0%, 100%);        /* Main background (White)*/
  --color-text-body-inverted: hsl(0,0%,100%); /* Text color in dark backgrounds */
  /* Common interactive state */
  --color-primary-hover: hsl(230,18%,38%); /* Hover shade for primary actions */
  --color-selected: hsl(230,49%,10%, 0.1); /* Selected item background */

  /* Status Colors */
  --color-success: hsl(120,43%,28%);
  --color-warning: hsl(30,100%,50%);
  --color-alert: hsl(0,100%,25%);

  /* 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: 32px;

  /* 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;

  /* Page Margins */
  --page-margin-sm: 3rem;
  --page-margin-md: 6rem; 
  --page-margin-lg: 9rem;

  /* 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;
}
}