/*
 * tokens.css — the single source of truth for theming.
 *
 * This file holds ONLY design variables. Change a value here and it propagates
 * to every semantic class in app.css (and every page) automatically. No other
 * file should hard-code a color, radius, shadow, or font.
 *
 * Colors are stored as bare HSL channels ("H S% L%") rather than full colors so
 * any rule can add alpha, e.g. hsl(var(--primary) / 0.1). Values are ported
 * verbatim from the nursing-match-flow prototype (src/index.css): a light,
 * teal/emerald, card-dense marketplace.
 */
:root {
  /* ---- Type ---- */
  --font-heading: "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --text-base: 14px;
  --leading-base: 1.6;
  --tracking-heading: -0.03em;

  /* ---- Surfaces ---- */
  --background: 210 40% 98%;        /* #f8fafc page */
  --foreground: 215 25% 27%;        /* #1e293b body text */
  --card: 0 0% 100%;                /* #ffffff */
  --card-foreground: 215 25% 27%;
  --card-elevated: 166 100% 97%;    /* #f0fdfa tinted card */
  --popover: 0 0% 100%;
  --popover-foreground: 215 25% 27%;

  /* ---- Brand: teal/emerald ---- */
  --primary: 172 85% 32%;           /* #0D9488 */
  --primary-foreground: 0 0% 100%;
  --primary-hover: 172 77% 40%;     /* #14b8a0 */
  --primary-light: 166 100% 93%;    /* #ccfbf1 */

  /* ---- Neutrals ---- */
  --secondary: 210 40% 96%;         /* #f1f5f9 */
  --secondary-foreground: 215 25% 27%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;  /* #64748b */
  --accent: 166 100% 93%;           /* #ccfbf1 */
  --accent-foreground: 172 85% 32%;

  /* ---- Headings ---- */
  --heading: 222 70% 11%;           /* #0a1628 */
  --subheading: 213 65% 24%;        /* #1e3a5f */

  /* ---- Lines & focus ---- */
  --border: 213 27% 88%;            /* #e2e8f0 */
  --input: 213 27% 88%;
  --ring: 172 85% 32%;

  /* ---- Status (bg + fg pairs for pills/badges) ---- */
  --status-success-bg: 152 81% 96%; --status-success-fg: 158 94% 24%; /* emerald */
  --status-warning-bg: 48 100% 96%; --status-warning-fg: 32 81% 36%;  /* amber */
  --status-danger-bg: 0 86% 97%;    --status-danger-fg: 0 74% 42%;    /* red */
  --status-info-bg: 214 100% 97%;   --status-info-fg: 224 76% 48%;    /* blue */
  --status-neutral-bg: 210 40% 96%; --status-neutral-fg: 215 25% 35%; /* slate */
  --status-accent-bg: 166 76% 96%;  --status-accent-fg: 175 84% 26%;  /* teal */
  --destructive: 0 84% 60%;         /* #ef4444 */
  --destructive-foreground: 0 0% 100%;

  /* ---- Radii ---- */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-pill: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.10);
  --shadow-topbar: 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-sidebar: 2px 0 12px rgba(0, 0, 0, 0.04);

  /* ---- Sidebar ---- */
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 215 25% 27%;
  --sidebar-border: 213 27% 92%;

  /* ---- Layout dimensions ---- */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 68px;
  --topbar-height: 60px;
  --content-max: 1200px;

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