/**
 * Design tokens for the cochlea app surface.
 *
 * Prefer var(--token) in all other stylesheets. Do not reintroduce raw hex
 * for colors already listed here.
 */

/* DESIGN SOURCE OF TRUTH: the v0.3 Claude Design MVP export
   ("Tonotop App v0.3 Wireframes & Mock-Ups", Micah decision 2026-07-28).
   Cochlea implements that MVP, NOT the Tonotop marketing brand guide;
   the ink/teal shell below predates the decision and is being migrated
   token-by-token (typography + color done; spacing/radius + component audits pending).
   White-label direction (Dawn, IAB 2026-04): app carries the clinic's
   identity, no Tonotop brand faces in chrome.

   Type per the MVP: Source Sans everywhere including headings (titles
   40/600, sections 28/24/700); DM Sans only for wordmark/stat/label
   moments. No serif. All faces self-hosted, SIL OFL (license texts
   beside the files in /fonts). */
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}




@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color per the v0.3 MVP export (extracted 2026-07-28):
     blue primary, cool page, white cards, green success. */
  --ink: #212322;
  --muted: #545f71;
  --muted-strong: #404040; /* MVP inactive tabs / darker secondary text */
  --paper: #eef3fa;        /* page background (MVP body) */
  --surface: #ffffff;      /* cards */
  --accent: #009feb;       /* primary blue: actions, links, focus */
  --accent-soft: rgba(0, 159, 235, 0.16); /* soft blue fill (MVP chips/active) */
  --accent-soft-strong: rgba(0, 159, 235, 0.24); /* hover step for soft fills */
  --accent-sky: #7cd5ff;   /* light blue: gradient partner, highlights */
  --accent-grad: linear-gradient(0deg, #7cd5ff, #009feb); /* buttons: vertical, deep at top */
  --accent-grad-bar: linear-gradient(90deg, #009feb, #7cd5ff); /* progress bars/meters */
  --shadow-button: 0 6px 16px rgba(0, 159, 235, 0.28); /* MVP primary button glow */
  --line: #ececec;
  --fill: #ececec;         /* neutral fills, empty bars */
  --success: #00b35a;
  --success-strong: #33b833;
  --scrim: rgba(33, 35, 34, 0.92); /* dark overlays (MVP video/media) */
  --danger: #e00025;       /* matched to the palette family: hsl(350) at full sat, 5:1 on white */
  --danger-soft: rgba(224, 0, 37, 0.15);
  --danger-soft-strong: rgba(224, 0, 37, 0.24); /* hover step, mirrors accent */

  /* Type */
  --font-body: "Source Sans Pro", "Source Sans 3", system-ui, sans-serif;
  --font-display: "DM Sans", "Source Sans Pro", system-ui, sans-serif;
  /* Scale from the MVP export's usage: 12/14/16/18/24/28, stats 40/48 */
  --text-xs: 0.75rem;    /* 12px captions, chips */
  --text-sm: 0.875rem;   /* 14px secondary */
  --text-md: 1rem;       /* 16px body (dominant) */
  --text-lg: 1.125rem;   /* 18px ledes, large body */
  --text-xl: 1.5rem;     /* 24px subsection headings */
  --text-2xl: 1.75rem;   /* 28px section headings */
  --text-3xl: 2.5rem;    /* 40px page titles, large stats */
  --text-hero: 3rem;     /* 48px biggest stats */
  --leading-body: 1.5;
  --leading-tight: 1.15;
  --tracking-tight: -0.011em; /* MVP headline tracking */

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.65rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem; /* 24px: MVP buttons and mid cards */
  --radius-pill: 999px;

  /* Elevation */
  --shadow-menu: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 1px var(--accent-soft);

  /* Layout */
  --layout-max: 48rem;
  --hero-max: 40rem;
  --lede-max: 32rem;
  --menu-max: min(18rem, 70vw);
  --logo-h: 2rem;
  --logo-h-landing: 2.25rem;

  /* Motion / effects */
  --header-blur: blur(6px);
}