/* 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%);
  --color-pain: hsl(275,60%,45%);    /* Pain assessment chart color */

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

  /* Drop Shadows */
  --shadow-sm: 0 1px 2px hsl(150, 25%, 25%, 0.05);
  --shadow-md: 0 4px 6px hsl(150, 25%, 25%, 0.07), 0 2px 4px hsl(150, 25%, 25%, 0.06);
  --shadow-lg: 0 10px 15px hsl(150, 25%, 25%, 0.1), 0 4px 6px hsl(150, 25%, 25%, 0.05);

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

  /* Consumer-specific component tokens */
  --consumer-hero-min-height: clamp(520px, 75vh, 780px);
  --consumer-section-padding: 4rem 0;
  --consumer-section-padding-sm: 2.5rem 0;
  --consumer-section-padding-sm-emphasis: 3.25rem 0;
  --consumer-card-hover-lift: translateY(-4px);
  --consumer-animation-duration: 700ms;
  --consumer-animation-stagger: 100ms;

  /* Fluid typography for consumer landing (mobile-first, scales to desktop) */
  --consumer-font-hero-title: clamp(2rem, 5vw + 1rem, 3.2rem);
  --consumer-font-section-title: clamp(1.6rem, 3vw + 0.8rem, 2.5rem);
  --consumer-font-lede: clamp(1.0625rem, 1vw + 0.9rem, 1.5rem);
  --consumer-font-card-title: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --consumer-font-microcopy: clamp(0.95rem, 0.25vw + 0.9rem, 1rem);
  --consumer-font-activity-label: clamp(1rem, 0.5vw + 0.85rem, 1.125rem);

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