/* ============================================================================
   IntuneOT.ai — Design System Tokens (Warm Clinical Aesthetic)
   ============================================================================ */

:root {
  /* Canvas & Base Grounds */
  --sc-canvas: #FAF8F5;          /* Warm Irish linen canvas */
  --sc-canvas-rgb: 250, 248, 245;
  --sc-surface: #FFFFFF;         /* Crisp white card surface */
  --sc-surface-warm: #F4EFEB;    /* Soft oatmeal tint for cards & scrims */
  --sc-surface-muted: #EBE5DF;   /* Subdued dividing border */
  
  /* Ink & Typography */
  --sc-ink: #1C2421;             /* Deep slate woodland charcoal */
  --sc-ink-soft: #4A5652;        /* Muted moss grey for body text (WCAG AA 5.8:1) */
  --sc-ink-muted: #73807B;       /* Subdued metadata & chapter folios */
  
  /* Clinical & Sensory Accents */
  --sc-accent: #3A6953;          /* Deep botanical sage (primary action) */
  --sc-accent-ink: #FFFFFF;      /* High contrast text on accent */
  --sc-accent-hover: #2C5241;
  --sc-accent-amber: #D97E26;    /* Warm tactile amber (sensory equipment / peanut ball) */
  --sc-accent-sky: #2B6984;      /* Calming Irish coastal blue (neurology / clarity) */
  --sc-accent-clay: #BA5138;     /* Warm terracotta */
  --sc-accent-gold: #B8860B;     /* Warm subtle gold */
  
  /* Typography Families */
  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --sc-font-mono: "JetBrains Mono", monospace;
  
  /* Fluid Spacing Scale */
  --space-3xs: clamp(0.25rem, 0.5vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.8vw, 0.75rem);
  --space-xs:  clamp(0.75rem, 1.2vw, 1rem);
  --space-sm:  clamp(1rem, 1.6vw, 1.5rem);
  --space-md:  clamp(1.5rem, 2.4vw, 2.25rem);
  --space-lg:  clamp(2rem, 3.5vw, 3.5rem);
  --space-xl:  clamp(3rem, 5vw, 5rem);
  --space-2xl: clamp(4rem, 8vw, 8rem);
  
  /* Elevation & Shadows */
  --shadow-sm: 0 2px 8px rgba(28, 36, 33, 0.04);
  --shadow-md: 0 8px 24px rgba(28, 36, 33, 0.08);
  --shadow-lg: 0 16px 40px rgba(28, 36, 33, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(28, 36, 33, 0.04);
  
  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --border-subtle: 1px solid rgba(28, 36, 33, 0.08);
  --border-card: 1px solid rgba(28, 36, 33, 0.1);
  
  /* Scrims */
  --scrim-lead: linear-gradient(135deg, rgba(28, 36, 33, 0.85) 0%, rgba(28, 36, 33, 0.4) 60%, transparent 100%);
  --scrim-bottom: linear-gradient(to top, rgba(28, 36, 33, 0.9) 0%, rgba(28, 36, 33, 0.4) 60%, transparent 100%);
  --scrim-radial: radial-gradient(circle at center, rgba(28, 36, 33, 0.75) 0%, rgba(28, 36, 33, 0.92) 100%);
}