/*
 * IKON Community™ — shared design tokens
 * Source of truth: design/IKON-Community-UI-Mockup.html
 *   - base tokens: first <style> block, :root (line ~10)
 *   - --mint / --coral: only defined in the mockup's second <style> block,
 *     the "2026 REDESIGN SYSTEM" pass appended near the end of <body>
 *     (line ~1723). That block cascades over the whole document in a real
 *     browser, but only get its *additive* pieces (hero-network graphic,
 *     pill eyebrow) folded in here — the base palette/radii/type below
 *     stayed on the first block's values, which is what's been approved.
 *
 * Every later phase (auth, dashboards, admin) should link this file and
 * build on top of these tokens rather than redefining colors/fonts/radii.
 */

/* ---------------------------------------------------------------
 * Fonts — Fraunces (headings), Work Sans (body), IBM Plex Mono (labels/mono)
 *
 * One deliberate, permanent exception: the public landing page's own
 * hero h1 (public/css/landing.css's `.land-hero h1`) uses Work Sans at
 * a heavy weight instead of Fraunces. Scoped to that one element on
 * purpose, not a change to the pairing below; every other heading on
 * the landing page and every heading on every other page still gets
 * Fraunces from this file's own base rule further down. Needs a
 * page-scoped extra font request (home.php's own <head>) since this
 * file's own Work Sans import below only goes to 700, not the 800 that
 * rule uses.
 * --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Color ----
   * --ink/--ink-soft/--bg/--paper/--line/--muted/--mint are all
   * theme-reactive — redefined below under html[data-theme="dark"] so
   * light/dark mode reaches every component that reads them, sitewide,
   * without any component's own CSS needing to know which mode is
   * active. --teal/--gold stay the same brand accents in both modes
   * (unchanged below) — only surfaces and text flip. */
  --ink: #16213E;              /* primary text, headings */
  --ink-soft: #4B4F58;         /* secondary/body-soft text */
  --teal: #3E8E82;             /* accent: positive/live/success */
  --gold: #cb2d39;             /* accent: brand/CTA/highlight (named "gold" in source, renders crimson) */
  --bg: #F5F6F8;                /* page background */
  --paper: #FFFFFF;             /* card/surface background */
  --line: rgba(22, 33, 62, 0.09); /* hairline borders/dividers */
  --muted: #8A8E98;             /* tertiary text, placeholders, captions */

  --mint: rgba(62, 142, 130, 0.12); /* teal-tinted pill background — used by .pill and the hero eyebrow badge */

  --surface-muted: #F0F1F3; /* recessed surface — a disabled/locked form field, a textarea/file-input's own background — dimmer than --paper the same way --paper reads "raised" above --bg; theme-reactive below */

  /* Fixed brand-navy surface — the dashboard sidebar rail, solid navy
   * buttons/badges/chat bubbles, the admin login screen's navy half, the
   * mockup's bar-chart bars, etc. Deliberately does NOT flip in dark
   * mode below: these are already dark, branded surfaces by design, not
   * "page background" that should invert — the same navy in either
   * theme, same way a logo doesn't recolor itself. Used to be
   * `--indigo: var(--ink)`, a plain alias, before dark mode existed;
   * now its own literal value, since --ink itself is theme-reactive and
   * would otherwise drag every one of those surfaces light in dark mode. */
  --indigo: #16213E;

  /* Aliases kept for naming used elsewhere in planning docs — same values, do not redefine separately */
  --cream: var(--bg);
  --coral: var(--gold); /* the mockup's later "2026 redesign" pass renames this accent to --coral; same role, one token */

  /* ---- Fonts ---- */
  --font-heading: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ---- Radius scale (as used across the mockup) ---- */
  --radius-sm: 4px;   /* tags, chips, small badges */
  --radius-md: 6px;   /* buttons, inputs */
  --radius-lg: 8px;   /* cards: module cards, tiles, list panels */
  --radius-xl: 10px;  /* elevated panels: admin login card */
  --radius-2xl: 12px; /* chart cards */
  --radius-pill: 20px; /* pills, badges, chips */
  --radius-full: 50%;  /* avatars, dots, circular controls */

  /* ---- Spacing scale (derived from recurring paddings/gaps) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 70px;

  /* ---- Layout ---- */
  --container-width: 1180px;
  --container-padding: var(--space-6);

  /* ---- Shadows (generalized from mockup elevation; theme-reactive —
   * dark mode redefines these to plain black below, since a navy-tinted
   * shadow doesn't read as elevation against a background that's
   * already dark) ---- */
  --shadow-sm: 0 1px 3px rgba(22, 33, 62, 0.08);
  --shadow-md: 0 10px 24px rgba(22, 33, 62, 0.12);
  --shadow-lg: 0 20px 50px rgba(22, 33, 62, 0.15);

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;

  color-scheme: light; /* native form controls/scrollbars follow the mode too; dark mode redefines this below */
}

/* ---------------------------------------------------------------
 * Dark mode — same token set above, redefined for html[data-theme="dark"].
 * That attribute is set by public/js/theme.js on every page load
 * (landing page, Practitioner dashboard, Admin alike — not just where
 * the toggle control itself lives), defaulting to 'light' for every
 * visitor regardless of their OS/browser prefers-color-scheme setting,
 * unless they've explicitly chosen either direction via the toggle
 * themselves — persisted, once that happens, to localStorage — see that
 * file for the full read/apply logic and public/css/accessibility.css
 * for how the high-contrast override stays correct on top of whichever
 * mode is active here.
 *
 * --indigo (the fixed brand-navy surface — sidebar, solid buttons, the
 * admin login screen) and --teal/--gold (brand accents) are deliberately
 * NOT redefined here — see --indigo's own comment above.
 * --------------------------------------------------------------- */
html[data-theme="dark"] {
  --ink: #EDEEF2;
  --ink-soft: #B9BCC8;
  --bg: #0B0F1E;
  --paper: #161C30;
  --line: rgba(255, 255, 255, 0.12);
  --muted: #8890A3;

  --mint: rgba(62, 142, 130, 0.22);

  --surface-muted: #121729;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* ---------------------------------------------------------------
 * Base reset
 * --------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------
 * Typography
 * --------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.mono {
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------
 * Layout utility — recurring "max-width + centered + gutter" container
 * --------------------------------------------------------------- */
.container,
.wrap {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ---------------------------------------------------------------
 * Accessibility utility — visually hidden but present for screen
 * readers/search engines (e.g. a section heading the mockup's visual
 * design doesn't show, kept in the DOM for a correct heading outline).
 * --------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}