/* Design tokens: the "Harbour" design system (design-system/tokens.json, ported 2026-10-11).
   Every colour, surface, space, radius and shadow in new CSS comes from these variables;
   dark mode only redefines them. The design system keys dark mode on [data-theme="dark"];
   the app keeps html.dark-theme (layouts/base.php, theme/main.js). */
:root {
  color-scheme: only light;

  /* Identity: harbour navy, the seal's blue, its cyan sea ring. */
  --uh-harbour: #0b2545;
  --uh-brand: #0c4ca0;           /* the university blue where it must not lighten in dark mode */
  --uh-sea: #1597c8;             /* decorative: rings, the active nav marker */
  --uh-sea-ink: #0a6c93;         /* the sea as text */

  /* Grounds, text and status: Bootstrap 5.3's colours (user, 2026-10-13: the sand and greige
     read plain). The identity above (navy, seal blue, sea) and the sidebar keep their own.
     Text colours on tints are Bootstrap's darker shades (primary #0a58ca, success #146c43,
     danger #b02a37) or its -text-emphasis (warning, info): 4.5:1 or more on every tint. */
  --uh-bg: #f8f9fa;
  --uh-surface: #e9ecef;         /* sunken: table heads, footers, disabled fields */
  --uh-card: #ffffff;
  --uh-border: #dee2e6;
  --uh-control-border: #6c757d;  /* inputs and secondary buttons: 3:1 on the card */
  --uh-text: #212529;
  --uh-heading: #212529;
  --uh-muted: #595c5f;
  --uh-link: #0d6efd;
  --uh-primary: #0d6efd;
  --uh-primary-contrast: #ffffff;
  --uh-primary-hover: #0b5ed7;   /* the filled button under the pointer */
  --uh-primary-tint: #cfe2ff;    /* hovered and selected rows */
  --uh-focus: var(--uh-primary);
  --uh-row-hover: var(--uh-primary-tint);  /* hovered table rows */
  --uh-page-rule: #0d6efd;                 /* the one line under the page title: Bootstrap blue */

  /* Sidebar: harbour navy in both themes. */
  --uh-chrome: var(--uh-harbour);
  --uh-chrome-text: #c9d6e8;
  --uh-chrome-muted: #8fa3bd;
  --uh-chrome-active: #ffffff;
  --uh-chrome-hover: rgba(255, 255, 255, 0.07);
  --uh-chrome-marker: #5fd0f5;
  --uh-chrome-border: rgba(255, 255, 255, 0.1);

  /* Status: a fill, a tint ground and a readable text colour each. */
  --uh-success: #198754;
  --uh-success-tint: #d1e7dd;
  --uh-success-emphasis: #146c43;
  --uh-warning: #ffc107;
  --uh-warning-tint: #fff3cd;
  --uh-warning-emphasis: #664d03;
  --uh-danger: #dc3545;
  --uh-danger-tint: #f8d7da;
  --uh-danger-emphasis: #b02a37;
  --uh-info-tint: #cff4fc;
  --uh-info: #0dcaf0;  /* the info fill (soft and outline info buttons on hover) */
  --uh-warning-contrast: #000000;  /* text on the yellow and cyan fills (Bootstrap's color-contrast) */
  --uh-info-contrast: #000000;
  --uh-info-strong: #087990;      /* Bootstrap cyan-700: a cyan fill that carries white (4.9:1) */
  --uh-neutral-tint: #e2e3e5;

  /* Chart series, in order (ChartPlugin reads 1-8 at draw time). */
  --uh-chart-1: #0d6efd;
  --uh-chart-2: #fd7e14;
  --uh-chart-3: #0dcaf0;
  --uh-chart-4: #6f42c1;
  --uh-chart-5: #198754;
  --uh-chart-6: #dc3545;
  --uh-chart-7: #d63384;
  --uh-chart-8: #6c757d;

  /* Search palette tiles (Config\SearchActions::$tones 1-7: blue, orange, cyan, purple, green,
     red, pink): Bootstrap colours that carry a white icon at 3:1 or more, so orange and cyan
     take their -600 / -700 shades. The same in both themes. --uh-tone-line-* draw the actions'
     outlined tiles and the matched letters' underline on the card: the tile colours in light,
     the light chart colours in dark. */
  --uh-tone-1: #0d6efd;
  --uh-tone-2: #ca6510;
  --uh-tone-3: #087990;
  --uh-tone-4: #6f42c1;
  --uh-tone-5: #198754;
  --uh-tone-6: #dc3545;
  --uh-tone-7: #d63384;
  --uh-tone-line-1: var(--uh-tone-1);
  --uh-tone-line-2: var(--uh-tone-2);
  --uh-tone-line-3: var(--uh-tone-3);
  --uh-tone-line-4: var(--uh-tone-4);
  --uh-tone-line-5: var(--uh-tone-5);
  --uh-tone-line-6: var(--uh-tone-6);
  --uh-tone-line-7: var(--uh-tone-7);

  --uh-overlay: rgba(0, 0, 0, 0.5);
  --uh-shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --uh-shadow-raised: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  /* App names kept from before the design system, pointed at it. */
  --uh-shadow: var(--uh-shadow-raised);
  --uh-input: var(--uh-card);
  --uh-input-disabled: var(--uh-surface);
  --uh-placeholder: var(--uh-muted);
  --uh-danger-text: var(--uh-danger);
  --uh-primary-emphasis: #0a58ca;
  --uh-secondary-emphasis: var(--uh-muted);
  --uh-info-emphasis: #055160;
  --uh-primary-rgb: 13 110 253;   /* for alpha: rgb(var(--uh-primary-rgb) / 0.1) */
  --uh-shadow-rgb: 0 0 0;
  --uh-scrollbar: rgba(255, 255, 255, 0.4);   /* the sidebar's simplebar thumb, on the navy */
  --uh-scroll-thumb: #adb5bd;                  /* page and panel scrollbars, on a clear track */
  --uh-scroll-thumb-hover: var(--uh-control-border);
  --uh-selection: #cfe2ff;                     /* selected text: Bootstrap blue-100 */
  --uh-selection-text: #052c65;

  /* Top header and footer: light bars over the page (the sidebar alone is navy). */
  --uh-topbar: var(--uh-card);
  --uh-topbar-text: var(--uh-text);
  --uh-topbar-hover: var(--uh-surface);
  --uh-topbar-border: var(--uh-border);
  --uh-header-height: 65px; /* .top-header in theme/style.css */
  --uh-header-shadow: var(--uh-shadow-card);

  /* Command palette: the page behind it, the selected row, keyboard keys. */
  --uh-palette-active: var(--uh-primary-tint);
  --uh-palette-shadow: var(--uh-shadow-raised);
  --uh-kbd-bg: var(--uh-surface);
  --uh-kbd-border: var(--uh-border);

  /* The same in both themes. */
  --uh-white-rgb: 255 255 255;
  --uh-black-rgb: 0 0 0;
  --uh-on-color: #ffffff;        /* text and icons on a coloured fill: brand bands, badges, quick actions */
  --uh-brand-rgb: 12 76 160;
  --uh-media-bg: #000000;        /* behind a camera or scanner picture */
  /* Documents drawn as white paper (receipts, the archive preview, the ID card's QR):
     they stay white in dark mode, as printed. */
  --uh-paper: #ffffff;
  --uh-paper-ink: #0f172a;
  --uh-paper-rule: #111827;      /* the receipt's lines and stamp */
  --uh-paper-text: #334155;
  --uh-paper-muted: #475569;
  --uh-paper-faint: #64748b;
  --uh-paper-line: #e5e7eb;
  --uh-paper-subtle: #f8fafc;

  /* Space, radius, motion, type */
  --uh-space-1: 4px;
  --uh-space-2: 8px;
  --uh-space-3: 12px;
  --uh-space-4: 16px;
  --uh-space-5: 24px;
  --uh-space-6: 32px;
  --uh-space-7: 48px;
  --uh-radius-sm: 6px;           /* controls and buttons */
  --uh-radius-md: 10px;          /* cards and alerts */
  --uh-radius-lg: 16px;          /* modals and the login panel */
  --uh-radius-pill: 999px;
  --uh-duration-fast: 120ms;
  --uh-duration-base: 180ms;
  --uh-duration-slow: 240ms;
  --uh-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --uh-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --uh-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --font-display: "Readex Pro", "Almarai", system-ui, sans-serif;
  --font-body: "Almarai", system-ui, sans-serif;
  --font-numeric: "Readex Pro", system-ui, sans-serif;
}

/* Dark: Bootstrap 5.3's dark mode (grounds #212529 / #2b3035 / #343a40, its -bg-subtle tints
   and -text-emphasis colours); the sidebar keeps the navy at night. Every colour has two
   strengths: the base token (--uh-primary, --uh-success...) is the fill, the -emphasis token the
   light version for text, icons and the focus ring on the dark card. Fills keep Bootstrap's
   text: white on blue, green and red, black on yellow and cyan (--uh-warning-contrast). */
html.dark-theme {
  color-scheme: only light;
  --uh-harbour: #0a0d11;
  --uh-sea: #78d0e5;
  --uh-sea-ink: #78d0e5;
  --uh-bg: #121417;
  --uh-surface: #212529;
  --uh-card: #1a1d21;
  --uh-border: #2b3035;
  --uh-control-border: #6c757d;
  --uh-text: #dee2e6;
  --uh-heading: #f8f9fa;
  --uh-muted: #adb5bd;
  --uh-link: #6ea8fe;
  --uh-primary: #0d6efd;
  --uh-primary-emphasis: #6ea8fe;
  --uh-primary-contrast: #ffffff;
  --uh-primary-tint: #182c49;
  --uh-focus: var(--uh-primary-emphasis);
  --uh-row-hover: #24292e;
  --uh-page-rule: #3d8bfd;                 /* Bootstrap blue-400 */
  --uh-chrome-text: #ccd1d9;
  --uh-chrome-muted: #999fa7;
  --uh-chrome-marker: #78d0e5;
  --uh-chrome-border: #2c333b;  /* the sidebar's edge, fixed: the sidebar keeps its colours */
  --uh-success: #198754;
  --uh-success-tint: #1a302a;
  --uh-success-emphasis: #75b798;
  --uh-warning: #ffc107;
  --uh-warning-tint: #433b1c;
  --uh-warning-emphasis: #ffda6a;
  --uh-danger: #dc3545;
  --uh-danger-tint: #3d2127;
  --uh-danger-emphasis: #ea868f;
  --uh-danger-text: var(--uh-danger-emphasis);
  --uh-info: #0dcaf0;
  --uh-info-tint: #183c46;
  --uh-neutral-tint: #2b3035;
  /* Chart series: Bootstrap's 400 shades, vivid on the dark card (the -text-emphasis pastels read
     washed out, like the old palette). */
  --uh-chart-1: #3d8bfd;
  --uh-chart-2: #fd9843;
  --uh-chart-3: #3dd5f3;
  --uh-chart-4: #8c68cd;
  --uh-chart-5: #479f76;
  --uh-chart-6: #e35d6a;
  --uh-chart-7: #de5c9d;
  --uh-chart-8: #adb5bd;
  --uh-tone-line-1: var(--uh-chart-1);
  --uh-tone-line-2: var(--uh-chart-2);
  --uh-tone-line-3: var(--uh-chart-3);
  --uh-tone-line-4: var(--uh-chart-4);
  --uh-tone-line-5: var(--uh-chart-5);
  --uh-tone-line-6: var(--uh-chart-6);
  --uh-tone-line-7: var(--uh-chart-7);
  --uh-overlay: rgba(0, 0, 0, 0.7);
  --uh-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --uh-shadow-raised: 0 10px 28px rgba(0, 0, 0, 0.6);
  --uh-primary-rgb: 13 110 253;
  --uh-shadow-rgb: 0 0 0;
  --uh-scroll-thumb: #3d434a;
  --uh-selection: #084298;
  --uh-selection-text: #ffffff;
  --uh-info-emphasis: #6edff6;
}

/* Type scale (design-system/tokens.json type.groups). */
.uh-display { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 700; }
.uh-h1 { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; }
.uh-h2 { font-family: var(--font-display); font-size: 19px; line-height: 28px; font-weight: 600; }
.uh-h3 { font-family: var(--font-display); font-size: 16px; line-height: 24px; font-weight: 600; }
.uh-stat { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 600; }
.uh-body { font-family: var(--font-body); font-size: 15px; line-height: 24px; font-weight: 400; }
.uh-body-strong { font-family: var(--font-body); font-size: 15px; line-height: 24px; font-weight: 700; }
.uh-small { font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 400; }
.uh-label { font-family: var(--font-body); font-size: 13px; line-height: 18px; font-weight: 700; }
.uh-caption { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 700; }