/**
 * Hrothi design tokens — load FIRST in every app (before landing/theme/app/styles).
 *
 * Single home for fonts and for the colour palette. Two layers:
 *   1. Primitives (--c-*): every raw colour the UI uses, theme-independent, never redefined
 *      elsewhere. Other stylesheets write var(--c-…) instead of a hex literal
 *      (enforced by web-shared/test/cssTokens.test.js).
 *   2. Palette / semantic tokens (--bg, --text, --line, --accent, --mint, --danger…, plus
 *      --accent-text, --danger-bg…): flip between light and dark below. Components may remap
 *      them in a scope (dialogBw.css .modal, runner body.runner-app, custom portals via
 *      customBranding.js), so use the primitive when a colour must not follow those remaps.
 *
 * Accent rule: --accent / --mint (#1bd3cb) are FILLS only (buttons, bars, tints).
 * For accent-coloured TEXT and links use --accent-text (≥ 4.5:1 in both themes).
 */

/* —— Fonts (declared once; previously duplicated in theme.css, app.css, preview.css) —— */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/shared/fonts/manrope-500.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/shared/fonts/manrope-600.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/shared/fonts/manrope-700.woff2") format("woff2");
}

/* —— Colour primitives (theme-independent; grey names are the channel byte: --c-gray-2a = #2a2a2a) —— */
:root {
  --c-black: #000000;
  --c-white: #ffffff;
  --c-gray-07: #070707;
  --c-gray-0a: #0a0a0a;
  --c-gray-11: #111111;
  --c-gray-12: #121212;
  --c-gray-14: #141414;
  --c-gray-1a: #1a1a1a;
  --c-gray-1c: #1c1c1c;
  --c-gray-22: #222222;
  --c-gray-2a: #2a2a2a;
  --c-gray-33: #333333;
  --c-gray-55: #555555;
  --c-gray-5c: #5c5c5c;
  --c-gray-66: #666666;
  --c-gray-6b: #6b6b6b;
  --c-gray-88: #888888;
  --c-gray-8a: #8a8a8a;
  --c-gray-99: #999999;
  --c-gray-bd: #bdbdbd;
  --c-gray-c8: #c8c8c8;
  --c-gray-cc: #cccccc;
  --c-gray-dd: #dddddd;
  --c-gray-e5: #e5e5e5;
  --c-gray-ee: #eeeeee;
  --c-gray-f0: #f0f0f0;
  --c-gray-f3: #f3f3f3;
  --c-gray-f4: #f4f4f4;

  --c-mint: #1bd3cb; /* brand accent — fills only; text uses --accent-text */
  --c-mint-100: #b8fff0;
  --c-mint-200: #7dffd8;
  --c-mint-800: #0b6e69;

  --c-green-50: #e6f5ef;
  --c-green-200: #8fd4a0;
  --c-green-300: #7dcea0;
  --c-green-400: #3ddba6;
  --c-green-500: #44aa77;
  --c-green-600: #1fa97a;
  --c-green-650: #1a9a72;
  --c-green-700: #137a5a;
  --c-green-750: #1a7a4c;
  --c-green-800: #0b5c45;
  --c-green-950: #0f2a21;

  --c-red-50: #fdecec;
  --c-red-100: #ffd6d6;
  --c-red-300: #ff8f8f;
  --c-red-400: #ff6b6b;
  --c-red-500: #ff4d4d;
  --c-red-600: #c62828;
  --c-red-700: #b42318;
  --c-red-800: #a32020;
  --c-red-950: #2e1414;
  --c-wine: #7c1f2d;

  --c-amber-50: #fff4dc;
  --c-amber-100: #ffe6b8;
  --c-amber-300: #ffc55c;
  --c-amber-500: #c4a35a;
  --c-amber-600: #b3832f;
  --c-amber-800: #8a5a00;
  --c-amber-900: #5a3b12;
  --c-amber-950: #2e2410;

  --c-sand-50: #f7f5f2;
  --c-sand-100: #ede3d6;

  --c-slate-100: #e8ecf1;
  --c-slate-400: #9aa3b2;
  --c-slate-700: #2c3440;
  --c-slate-750: #243044;
  --c-slate-800: #1a1f27;
  --c-slate-900: #0f1216;
  --c-slate-950: #0c0f14;

  --c-blue-500: #4a7fd4;
  --c-indigo-700: #3521a8;
}

/* —— Colour palette: light (default) ——
 * Values are what every app rendered before the palette was centralised (participant, admin and
 * public all resolved to these on <body>). App-scoped exceptions: web-runner/app.css
 * (body.runner-app), web-public/preview.css (.preview-body). */
:root {
  --mint: var(--c-mint);
  --accent: var(--c-mint);
  --accent-2: var(--c-white);
  --accent-3: var(--c-gray-2a);
  --bg: var(--c-white);
  --surface: var(--c-white);
  --text: var(--c-black);
  --muted: var(--c-gray-2a);
  --line: rgba(0, 0, 0, 0.14);
  --success: var(--c-green-700);
  --warn: var(--c-gray-2a);
  --danger: var(--c-red-800);
  --btn-text: var(--c-black);
  --btn-border: var(--c-black);
  --btn-gradient: linear-gradient(90deg, var(--c-mint), var(--c-white));
  --deco-gradient: linear-gradient(49deg, var(--c-mint), var(--c-black));
  --page-bg: linear-gradient(30deg, rgba(26, 232, 222, 1) 1%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
  --overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.72) 100%);
}

/* —— Colour palette: dark —— */
:root[data-theme="dark"],
html[data-theme="dark"] {
  --bg: var(--c-black);
  --surface: var(--c-black);
  --text: var(--c-white);
  --muted: var(--c-gray-c8);
  --line: rgba(255, 255, 255, 0.16);
  --accent-3: var(--c-gray-c8);
  --success: var(--c-mint);
  --warn: var(--c-gray-c8);
  --danger: var(--c-red-500);
  --btn-border: var(--c-white);
  --page-bg: linear-gradient(30deg, rgba(26, 232, 222, 1) 1%, rgba(0, 0, 0, 1) 50%, rgba(20, 0, 0, 1) 100%);
}

:root {
  /* Colour — semantic */
  --accent-text: var(--c-mint-800); /* 6.1:1 on #fff, 5.3:1 on #f0f0f0 */
  --success-text: var(--c-green-700); /* 5.3:1 on #fff */
  --danger-text: var(--c-red-800); /* 7.5:1 on #fff */
  --warning-text: var(--c-amber-800); /* 5.6:1 on #fff */
  --warning-bg: var(--c-amber-50);
  --danger-bg: var(--c-red-50);
  --success-bg: var(--c-green-50);
  --border-strong: var(--c-gray-8a); /* form controls: 3.5:1 on #fff (WCAG 1.4.11) */
  --focus-ring: var(--c-black);

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Type scale — nothing below 0.75rem */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.35rem;

  /* Shape, elevation, motion, layers */
  --radius-0: 0;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 12px 28px rgba(0, 0, 0, 0.22);
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 120;
  --z-dropdown: 300;
  --z-drawer: 4000;
  --z-modal: 4200;
  --z-overlay: 9000;
  --z-toast: 12000;
  --touch-target: 2.75rem; /* 44px */
}

:root[data-theme="dark"],
html[data-theme="dark"] {
  --accent-text: var(--c-mint); /* 11.2:1 on #000 */
  --success-text: var(--c-green-400);
  --danger-text: var(--c-red-400);
  --warning-text: var(--c-amber-300);
  --warning-bg: var(--c-amber-950);
  --danger-bg: var(--c-red-950);
  --success-bg: var(--c-green-950);
  --border-strong: var(--c-gray-6b); /* 3.9:1 on #000 */
  --focus-ring: var(--c-white);
}

/* —— Focus: always visible for keyboard users, in every app and theme ——
 * !important so older `outline: none` rules can't remove it. Mouse clicks on buttons don't
 * trigger :focus-visible, so this doesn't add rings on click. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="tab"], [role="button"]):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}

/* Visually hidden but available to screen readers (page titles, labels) */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* —— Confirmation dialog (web-shared/confirmDialog.js) —— */
dialog.confirm-dialog {
  max-width: min(32rem, calc(100vw - 2 * var(--space-4)));
  padding: 0;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.14));
  border-radius: var(--radius-0);
  background: var(--surface, var(--c-white));
  color: var(--text, var(--c-black));
  box-shadow: var(--shadow-3);
}
dialog.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.confirm-dialog__box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
}
.confirm-dialog__title {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.3;
}
.confirm-dialog__text {
  margin: 0;
  color: var(--muted, inherit);
  white-space: pre-line;
}
.confirm-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}