/* ==========================================================================
   Go-HR design tokens

   TWO LAYERS LIVE IN THIS FILE, and they are not interchangeable.

   1. The `--gk-*` layer below is the redesign's token layer, ported from
      docs/design/prototype/go-hr-redesign.html. It is what gk.css and every
      screen rebuilt in phases A-F reads.

   2. The `--gohr-*` layer further down is the layer the CURRENT product runs
      on. gohr-kit.css, gohr-modern.css and gohr-components.css make 1,219
      references to it and they style all 241 already-migrated screens. It
      stays until phase G removes its last caller. The redesign brief said to
      replace this file with the prototype's token draft; doing that literally
      would delete 202 definitions out from under those references and break
      every existing screen, so the new layer is prepended instead.

   Three rules the redesign holds this layer to:

   a. Brand derives from the tenant. `--primary-color` / `--hover-color` are
      rendered per-company into <style> by layouts/theme_head.blade.php out of
      ThemeService::brandPalette(). Everything brand-ish derives from them, so
      a tenant sets one colour and the accents follow.
   b. Semantic colour NEVER derives from the brand. The purchased template maps
      .btn-danger onto --primary-color, so on a blue tenant every Delete button
      is blue. Danger looks like danger whatever the company's palette is.
   c. The series scale s1..s5 is validated (lightness band, chroma floor,
      colour-blind separation, contrast on both surfaces) and is never reused
      to mean a status.

   Dark is a token redefinition, not a second stylesheet: every token is
   declared on bare :root first, and the dark blocks only redefine.
   ========================================================================== */

:root {
  /* --- brand: derived from the active company palette -------------------
     The source names are written per-company into <style> by
     layouts/theme_head.blade.php out of ThemeService::brandPalette(). See the
     comment there for why they are not --primary-color. */
  --gk-brand: var(--gk-brand-light, #565CB8);
  --gk-brand-hover: var(--gk-brand-light-hover, #3A4090);
  --gk-brand-active: color-mix(in srgb, var(--gk-brand-hover) 82%, #000000);
  --gk-brand-ink: color-mix(in srgb, var(--gk-brand) 78%, #0F1A20);
  --gk-brand-tint: color-mix(in srgb, var(--gk-brand) 12%, #FFFFFF);
  --gk-brand-tint-2: color-mix(in srgb, var(--gk-brand) 22%, #FFFFFF);
  /* White on a filled brand surface in both themes, matching the decision
     --gohr-on-accent already records: the surface is coloured, not themed. */
  --gk-brand-on: var(--gk-brand-on-light, #FFFFFF);

  /* --- neutrals --------------------------------------------------------- */
  --gk-bg: #F4F7F8;
  --gk-surface: #FFFFFF;
  --gk-surface-2: #F7F9FA;
  --gk-surface-3: #EFF3F5;
  --gk-surface-inset: #F1F5F6;
  --gk-border: #DEE6EA;
  --gk-border-strong: #C3D0D6;

  /* Acting inside a company. Deliberately louder than --gk-warn: the bar
     that says which tenant you are editing is a safety signal, and the
     comment it came from is explicit that confusing "acting inside company
     X" with "acting on no company" is how someone edits the wrong
     company's data. Folding it into the muted warn palette weakened it. */
  --gk-acting-fill: #FEF3C7;
  --gk-acting-edge: #F59E0B;
  --gk-acting-ink: #B45309;
  --gk-ink: #0F1A20;
  --gk-ink-2: #44565F;
  --gk-ink-3: #6C808A;
  --gk-ink-4: #93A5AE;

  /* --- semantic state: reserved, never a series colour ------------------ */
  --gk-ok: #1C7A4C;     --gk-ok-tint: #E3F3EA;     --gk-ok-ink: #125437;
  --gk-warn: #9A6400;   --gk-warn-tint: #FBF0DC;   --gk-warn-ink: #6E4800;
  --gk-danger: #B3261E; --gk-danger-tint: #FBE9E7; --gk-danger-ink: #7F1A14;
  --gk-info: #1D5FA8;   --gk-info-tint: #E6EEF8;   --gk-info-ink: #154778;
  --gk-neutral-tint: #EDF1F3; --gk-neutral-ink: #44565F;
  /* Text on a FILLED semantic button. The dark hues lighten, so white on them
     drops under 4.5:1 and the ink has to flip with the theme. */
  --gk-on-ok: #FFFFFF;
  --gk-on-danger: #FFFFFF;

  /* --- categorical series ----------------------------------------------- */
  --gk-s1: #1288A8; --gk-s2: #C07A22; --gk-s3: #5E6AC4; --gk-s4: #7E8C2E; --gk-s5: #A44F72;

  /* --- platform console chrome ------------------------------------------
     Deliberately theme-independent and outside the tenant palette: an
     operator must never be uncertain whether they are at platform level or
     inside a company, so this bar looks the same in every theme and carries
     no company colour at all. */
  --gk-platform-bg: #0F1A20;
  --gk-platform-raised: #1B272E;
  --gk-platform-ink: #C8D6DC;
  --gk-platform-ink-strong: #FFFFFF;
  --gk-platform-ink-muted: #A7BAC3;
  --gk-platform-line: #24333B;
  --gk-platform-line-strong: #33454E;

  /* --- scrim ------------------------------------------------------------ */
  --gk-scrim: rgba(9, 17, 21, .42);

  /* --- type ------------------------------------------------------------- */
  --gk-font: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Figures, not a monospace face. The audit read whole reports, summary
     strips and stat cards as "code" because a typewriter font set them apart
     from every other line on the page. IBM Plex Sans carries tabular figures,
     so .gk-num still aligns a column of numbers - it just does it in the
     body face. Kept as its own token so a future change has one place. */
  --gk-font-num: var(--gk-font);
  --gk-fs-2xs: 0.6875rem;
  --gk-fs-xs: 0.75rem;
  --gk-fs-sm: 0.8125rem;
  --gk-fs-md: 0.875rem;
  --gk-fs-lg: 1rem;
  --gk-fs-xl: 1.25rem;
  --gk-fs-2xl: 1.5rem;
  --gk-fs-3xl: 1.875rem;
  --gk-lh-tight: 1.25;
  --gk-lh: 1.5;

  /* --- space (4px base) -------------------------------------------------- */
  --gk-sp-1: 4px;  --gk-sp-2: 8px;  --gk-sp-3: 12px; --gk-sp-4: 16px;
  --gk-sp-5: 20px; --gk-sp-6: 24px; --gk-sp-8: 32px; --gk-sp-10: 40px;
  --gk-sp-12: 48px;

  /* --- shape: four radii, not one per component -------------------------- */
  --gk-r-sm: 4px; --gk-r: 6px; --gk-r-lg: 10px; --gk-r-pill: 999px;

  /* --- elevation: three levels, assigned by role ------------------------- */
  --gk-sh-1: 0 1px 2px rgba(15, 26, 32, .06);
  --gk-sh-2: 0 4px 12px -2px rgba(15, 26, 32, .10), 0 2px 4px -2px rgba(15, 26, 32, .06);
  --gk-sh-3: 0 16px 40px -8px rgba(15, 26, 32, .22), 0 4px 12px -4px rgba(15, 26, 32, .10);

  /* --- shell metrics ----------------------------------------------------- */
  --gk-rail: 248px;
  --gk-rail-collapsed: 60px;
  --gk-topbar: 52px;
  --gk-row-h: 44px;

  /* --- stacking ----------------------------------------------------------
     The prototype's ladder (60/70/80/90) is kept in ORDER but lifted above
     the --gohr-z-* ladder below, which the legacy layers still use and which
     runs to 700. A new overlay has to beat legacy page content; a legacy
     modal at 600 must not cover a new toast. Scrim and rail are deliberately
     on DIFFERENT levels - they shared one in the prototype's first cut and
     the open menu rendered visible but unclickable. */
  --gk-z-topbar: 210;
  --gk-z-rail: 220;
  --gk-z-scrim: 500;
  --gk-z-drawer: 510;
  --gk-z-rail-drawer: 520;
  --gk-z-modal: 620;
  --gk-z-toast: 720;
  --gk-z-pop: 760;
}

/* Dark. Only colour is redefined - space, type, shape and the ladder are
   theme-independent and are declared once above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gk-brand-on: var(--gk-brand-on-dark, #FFFFFF);
    --gk-brand: var(--gk-brand-dark, #5C62BC);
    --gk-brand-hover: var(--gk-brand-dark-hover, #6E74C9);
    --gk-brand-active: color-mix(in srgb, var(--gk-brand-hover) 80%, #FFFFFF);
    --gk-brand-ink: color-mix(in srgb, var(--gk-brand) 58%, #E8EFF2);
    --gk-brand-tint: color-mix(in srgb, var(--gk-brand) 18%, #0B1014);
    --gk-brand-tint-2: color-mix(in srgb, var(--gk-brand) 30%, #0B1014);

    --gk-bg: #0B1014;
    --gk-surface: #141B21;
    --gk-acting-fill: #3A2A08;
    --gk-acting-edge: #F59E0B;
    --gk-acting-ink: #FCD34D;
    --gk-surface-2: #19222A;
    --gk-surface-3: #1F2A33;
    --gk-surface-inset: #101820;
    --gk-border: #25323C;
    --gk-border-strong: #36474F;
    --gk-ink: #E8EFF2;
    --gk-ink-2: #AEC0C9;
    --gk-ink-3: #8698A2;
    --gk-ink-4: #66777F;

    --gk-ok: #4CB37D;     --gk-ok-tint: #10301F;     --gk-ok-ink: #8BD5AE;
    --gk-warn: #D69A34;   --gk-warn-tint: #33230A;   --gk-warn-ink: #EFC583;
    --gk-danger: #E06A62; --gk-danger-tint: #391714; --gk-danger-ink: #F2A9A3;
    --gk-info: #6AA0DC;   --gk-info-tint: #12253A;   --gk-info-ink: #A8C9EC;
    --gk-neutral-tint: #1E2830; --gk-neutral-ink: #AEC0C9;
    --gk-on-ok: #052617;
    --gk-on-danger: #2E0906;

    --gk-s1: #3FA9C8; --gk-s2: #D79945; --gk-s3: #8A93DC; --gk-s4: #A3B04F; --gk-s5: #C67693;

    --gk-scrim: rgba(3, 7, 10, .62);

    --gk-sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --gk-sh-2: 0 4px 12px -2px rgba(0, 0, 0, .55), 0 2px 4px -2px rgba(0, 0, 0, .4);
    --gk-sh-3: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 4px 12px -4px rgba(0, 0, 0, .5);
  }
}

[data-theme="dark"] {
  --gk-brand-on: var(--gk-brand-on-dark, #FFFFFF);
  --gk-brand: var(--gk-brand-dark, #5C62BC);
  --gk-brand-hover: var(--gk-brand-dark-hover, #6E74C9);
  --gk-brand-active: color-mix(in srgb, var(--gk-brand-hover) 80%, #FFFFFF);
  --gk-brand-ink: color-mix(in srgb, var(--gk-brand) 58%, #E8EFF2);
  --gk-brand-tint: color-mix(in srgb, var(--gk-brand) 18%, #0B1014);
  --gk-brand-tint-2: color-mix(in srgb, var(--gk-brand) 30%, #0B1014);

  --gk-bg: #0B1014;
  --gk-surface: #141B21;
  --gk-surface-2: #19222A;
  --gk-surface-3: #1F2A33;
  --gk-surface-inset: #101820;
  --gk-border: #25323C;
  --gk-border-strong: #36474F;
  --gk-ink: #E8EFF2;
  --gk-ink-2: #AEC0C9;
  --gk-ink-3: #8698A2;
  --gk-ink-4: #66777F;

  --gk-ok: #4CB37D;     --gk-ok-tint: #10301F;     --gk-ok-ink: #8BD5AE;
  --gk-warn: #D69A34;   --gk-warn-tint: #33230A;   --gk-warn-ink: #EFC583;
  --gk-danger: #E06A62; --gk-danger-tint: #391714; --gk-danger-ink: #F2A9A3;
  --gk-info: #6AA0DC;   --gk-info-tint: #12253A;   --gk-info-ink: #A8C9EC;
  --gk-neutral-tint: #1E2830; --gk-neutral-ink: #AEC0C9;
  --gk-on-ok: #052617;
  --gk-on-danger: #2E0906;

  --gk-s1: #3FA9C8; --gk-s2: #D79945; --gk-s3: #8A93DC; --gk-s4: #A3B04F; --gk-s5: #C67693;

  --gk-scrim: rgba(3, 7, 10, .62);

  --gk-sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --gk-sh-2: 0 4px 12px -2px rgba(0, 0, 0, .55), 0 2px 4px -2px rgba(0, 0, 0, .4);
  --gk-sh-3: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 4px 12px -4px rgba(0, 0, 0, .5);
}


/* ==========================================================================
   Below this line: the token layer the CURRENT product runs on. Untouched.
   Phase G removes it, together with its last caller.
   ========================================================================== */

/* ------------------------------------------------------------------
   Design tokens

   The single place this project names a colour, a radius, a shadow, a
   step of space or a stacking level. Every component - in this file, in
   the Blade components, and in anything added later - reads a token and
   never a literal. That rule is what makes a theme a data change rather
   than a second stylesheet.

   Only the COLOUR tokens are redeclared for dark. Radius, spacing,
   shadow geometry and z-index are the same in both themes; repeating
   them would be the duplication this layer exists to remove.

   --primary-color and friends come from the company's palette, rendered
   into a <style> block by resources/views/layouts/theme_head.blade.php.
   Everything else derives from them with color-mix(), so a tenant sets
   one colour and the accents follow.
   ------------------------------------------------------------------ */

:root {
  color-scheme: light;
  --gohr-accent: var(--primary-color, #c02658);
  --gohr-accent-hover: var(--hover-color, #a61f4a);
  --gohr-action: color-mix(in srgb, var(--gohr-accent) 68%, #172033);
  --gohr-action-hover: color-mix(in srgb, var(--gohr-accent-hover) 60%, #101828);
  --gohr-secondary-action: #667085;
  --gohr-secondary-action-hover: #475467;
  --gohr-link: color-mix(in srgb, var(--gohr-accent) 68%, #172033);
  --gohr-canvas: #f5f7fa;
  --gohr-surface: #ffffff;
  --gohr-surface-raised: #ffffff;
  --gohr-surface-muted: #f8fafc;
  --gohr-input: #ffffff;
  --gohr-text: #172033;
  --gohr-text-muted: #667085;
  --gohr-text-soft: #98a2b3;
  --gohr-border: #dfe4ea;
  --gohr-border-strong: #cbd2dc;
  --gohr-sidebar: #f8fafc;
  --gohr-sidebar-hover: #f1f5f9;
  --gohr-sidebar-expanded: #eaecf0;
  --gohr-sidebar-selected: #dce6f2;
  --gohr-sidebar-text: #344054;
  --gohr-sidebar-muted: #667085;
  --gohr-sidebar-selected-text: #172b4d;
  --gohr-sidebar-border: #e4e7ec;
  --gohr-sidebar-shadow: 4px 0 18px rgba(16, 24, 40, .06);
  --gohr-auth-aside-start: color-mix(in srgb, var(--gohr-accent) 62%, #14233d);
  --gohr-auth-aside-end: color-mix(in srgb, var(--gohr-accent) 34%, #0b1729);
  --gohr-auth-aside-kicker: #d9e9ff;
  --gohr-auth-aside-copy: rgba(255, 255, 255, .88);
  --gohr-success: #067647;
  --gohr-success-bg: #ecfdf3;
  --gohr-warning: #9a6700;
  --gohr-warning-bg: #fffaeb;
  --gohr-danger: #b42318;
  --gohr-danger-bg: #fef3f2;
  --gohr-info: #175cd3;
  --gohr-info-bg: #eff8ff;
  --gohr-radius-sm: 8px;
  --gohr-radius: 12px;
  --gohr-radius-lg: 18px;
  --gohr-shadow-sm: 0 2px 8px rgba(16, 24, 40, .05);
  --gohr-shadow: 0 14px 36px rgba(16, 24, 40, .10);
  --gohr-focus: 0 0 0 3px color-mix(in srgb, var(--gohr-accent) 24%, transparent);
}

[data-theme="dark"] {
  color-scheme: dark;
  --gohr-accent: var(--dark-primary-color, #f0527f);
  --gohr-accent-hover: var(--dark-hover-color, #f36b91);
  --gohr-action: color-mix(in srgb, var(--gohr-accent) 62%, #172033);
  --gohr-action-hover: color-mix(in srgb, var(--gohr-accent-hover) 58%, #101828);
  --gohr-secondary-action: #667085;
  --gohr-secondary-action-hover: #98a2b3;
  --gohr-link: color-mix(in srgb, var(--gohr-accent) 72%, #ffffff);
  /* The surfaces read from the kit's dark palette rather than carrying a
     second one. These were a blue-black family - canvas #101624, surface
     #182132 - beside the kit's charcoal #0B1014 and #141B21, so a screen
     still on the old layer sat in navy next to a converted one in charcoal
     and dark mode looked like two products. Same neutrals, one set of
     values; the accent above is still the tenant's. */
  --gohr-canvas: var(--gk-bg);
  --gohr-surface: var(--gk-surface);
  --gohr-surface-raised: var(--gk-surface-2);
  --gohr-surface-muted: var(--gk-surface-3);
  --gohr-input: var(--gk-surface);
  --gohr-text: var(--gk-ink);
  --gohr-text-muted: var(--gk-ink-2);
  --gohr-text-soft: var(--gk-ink-3);
  --gohr-border: var(--gk-border);
  --gohr-border-strong: var(--gk-border-strong);
  --gohr-sidebar: #0b1120;
  --gohr-sidebar-hover: #182235;
  --gohr-sidebar-expanded: #1e293b;
  --gohr-sidebar-selected: #29364d;
  --gohr-sidebar-text: #e5eaf2;
  --gohr-sidebar-muted: #a7b1c1;
  --gohr-sidebar-selected-text: #f8fafc;
  --gohr-sidebar-border: rgba(255, 255, 255, .09);
  --gohr-sidebar-shadow: 6px 0 24px rgba(0, 0, 0, .24);
  --gohr-auth-aside-start: color-mix(in srgb, var(--gohr-accent) 38%, #0b1425);
  --gohr-auth-aside-end: color-mix(in srgb, var(--gohr-accent) 20%, #050b16);
  --gohr-auth-aside-kicker: #d9e9ff;
  --gohr-auth-aside-copy: rgba(255, 255, 255, .88);
  --gohr-success: #75e0a7;
  --gohr-success-bg: #123524;
  --gohr-warning: #fec84b;
  --gohr-warning-bg: #3a2a0b;
  --gohr-danger: #fda29b;
  --gohr-danger-bg: #421b1b;
  --gohr-info: #84adff;
  --gohr-info-bg: #172e55;
  --gohr-shadow-sm: 0 2px 10px rgba(0, 0, 0, .20);
  --gohr-shadow: 0 16px 40px rgba(0, 0, 0, .32);
}


/* Space, stacking and type. Theme-independent, so declared once. */
:root {
  --gohr-space-1: 4px;
  --gohr-space-2: 8px;
  --gohr-space-3: 12px;
  --gohr-space-4: 16px;
  --gohr-space-5: 24px;
  --gohr-space-6: 32px;
  --gohr-space-7: 48px;

  --gohr-text-xs: .75rem;
  --gohr-text-sm: .8125rem;
  --gohr-text-base: .875rem;
  --gohr-text-lg: 1rem;
  --gohr-text-xl: 1.25rem;
  --gohr-text-2xl: 1.5rem;

  /* Text that sits on a filled brand or status surface. It is white in
     both themes because the surface it sits on is coloured, not themed. */
  --gohr-on-accent: #ffffff;

  /* An opaque mask stop. Not a colour anyone sees - only the alpha matters. */
  --gohr-mask-opaque: #000;

  --gohr-weight-normal: 400;
  --gohr-weight-medium: 500;
  --gohr-weight-bold: 600;

  /* One ladder, so a dropdown can never land under a sticky header and a
     toast can never land under a modal backdrop. */
  --gohr-z-base: 1;
  --gohr-z-sticky: 100;
  --gohr-z-sidebar: 200;
  --gohr-z-navbar: 300;
  --gohr-z-dropdown: 400;
  --gohr-z-backdrop: 500;
  --gohr-z-modal: 600;
  --gohr-z-toast: 700;
}


/* ===========================================================================
   Go-HR kit variables, merged from the design-system branch.

   Only the names GOHR-5 does not already define: every shared token keeps the
   value above, so the component layer and the derived dark theme are
   untouched. These are what gohr-kit.css and the x-kit.* components read.

   The kit's own palette for the shared names lived in gohr-kit-tokens.css,
   which nothing ever loaded. It was deleted with this redesign's first phase;
   git history has it if anyone needs the values back.
   =========================================================================== */
:root {
  --gohr-brand-ink: #252853;
  --gohr-brand: #565CB8;
  --gohr-brand-deep: #3A4090;
  --gohr-brand-cta: linear-gradient(135deg, #3A4090 0%, #565CB8 100%);
  --gohr-brand-tint: rgba(86, 92, 184, .10);
  --gohr-brand-tint-strong: rgba(86, 92, 184, .16);
  --gohr-signal: #E76021;
  --gohr-signal-tint: rgba(231, 96, 33, .12);
  --primary-color: #565CB8;
  --hover-color: #3A4090;
  --gohr-surface-sunken: #F3F3F8;
  --gohr-icon-chip: #EFF3F8;
  --gohr-on-brand: #FFFFFF;
  --gohr-hero: linear-gradient(160deg, #2E3270 0%, #1A1C3A 55%, #151632 100%);
  --gohr-hero-glow: radial-gradient(220px circle at 85% 0%, rgba(231, 96, 33, .40), rgba(231, 96, 33, 0) 70%);
  --gohr-neutral: #6E7284;
  --gohr-neutral-bg: rgba(37, 40, 83, .06);
  --gohr-r-chip: 999px;
  --gohr-r-control: 10px;
  --gohr-r-tile: 14px;
  --gohr-r-card: 18px;
  --gohr-r-panel: 22px;
  --gohr-r-modal: 24px;
  --gohr-shadow-pop: 0 12px 32px rgba(37, 40, 83, .14);
  --gohr-shadow-cta: 0 10px 24px rgba(86, 92, 184, .30);
  --gohr-ring-selected: 0 0 0 2px var(--gohr-brand-ink);
  --gohr-s1: 4px;
  --gohr-s2: 8px;
  --gohr-s3: 12px;
  --gohr-s4: 16px;
  --gohr-s5: 20px;
  --gohr-s6: 24px;
  --gohr-s7: 32px;
  --gohr-s8: 40px;
  --gohr-gutter: 24px;
  --gohr-h-sm: 32px;
  --gohr-h-md: 40px;
  --gohr-h-lg: 48px;
  --gohr-row: 56px;
  --gohr-thead: 48px;
  --gohr-topbar: 60px;
  --gohr-rail: 64px;
  --gohr-font: "Noto Kufi Arabic", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif, Riyal_Symbol;
  --gohr-font-body: var(--gohr-font);
  --gohr-font-num: "Inter", system-ui, -apple-system, sans-serif, Riyal_Symbol;
  --gohr-fs-metric: 28px;
  --gohr-fs-title: 20px;
  --gohr-fs-section: 15px;
  --gohr-fs-row: 14px;
  --gohr-fs-body: 14px;
  --gohr-fs-table: 13px;
  --gohr-fs-caption: 11.5px;
  --gohr-fs-chip: 11px;
  --gohr-ease: cubic-bezier(.4, 0, .2, 1);
  --gohr-dur: 180ms;
  --gohr-btn-primary-bg: var(--gohr-brand-ink);
  --gohr-btn-primary-fg: var(--gohr-on-brand);
  --gohr-btn-primary-bg-hover: var(--gohr-brand-deep);
  --gohr-btn-secondary-bg: var(--gohr-surface);
  --gohr-btn-secondary-fg: var(--gohr-text);
  --gohr-btn-secondary-border: var(--gohr-border-strong);
  --gohr-btn-ghost-fg: var(--gohr-text-muted);
  --gohr-btn-ghost-bg-hover: var(--gohr-surface-sunken);
  --gohr-btn-danger-bg: var(--gohr-danger-bg);
  --gohr-btn-danger-fg: var(--gohr-danger);
  --gohr-nav-item-fg: var(--gohr-sidebar-text);
  --gohr-nav-item-bg-hover: var(--gohr-sidebar-hover);
  --gohr-nav-item-bg-selected: var(--gohr-sidebar-selected);
  --gohr-nav-item-fg-selected: var(--gohr-sidebar-selected-text);
  --gohr-card-bg: var(--gohr-surface);
  --gohr-card-border: var(--gohr-border);
  --gohr-table-head-bg: var(--gohr-surface-sunken);
  --gohr-table-head-fg: var(--gohr-text-muted);
  --gohr-table-row-bg-hover: var(--gohr-surface-muted);
  --gohr-table-line: var(--gohr-border);
  --gohr-table-foot-shadow: 0 -8px 25px rgba(37, 40, 83, .06);
  --gohr-chip-neutral-bg: var(--gohr-neutral-bg);
  --gohr-chip-neutral-fg: var(--gohr-neutral);
  --gohr-input-bg: var(--gohr-input);
  --gohr-input-border: var(--gohr-border-strong);
  --gohr-input-border-focus: var(--gohr-brand);
  --gohr-input-fg: var(--gohr-text);
  --gohr-input-placeholder: var(--gohr-text-soft);
}

/* Bare, not :root - the dark block above is bare too, and a platform screen
   scopes data-theme="dark" to the top bar's subtree. Restating dark in one
   selector but not the other is what leaves a subtree half-themed: dark
   surfaces wearing light-mode brand, neutral and shadow tokens. */
[data-theme="dark"] {
  --gohr-brand-ink: #565CB8;
  --gohr-brand: #565CB8;
  --gohr-brand-deep: #3A4090;
  --gohr-brand-tint: rgba(86, 92, 184, .22);
  --gohr-brand-tint-strong: rgba(86, 92, 184, .30);
  --dark-primary-color: #565CB8;
  --dark-hover-color: #6E74C9;
  --primary-color: #565CB8;
  --hover-color: #6E74C9;
  --gohr-surface-sunken: #161C28;
  --gohr-icon-chip: #15202F;
  --gohr-neutral: #B9BFCC;
  --gohr-neutral-bg: rgba(255, 255, 255, .07);
  --gohr-shadow-pop: 0 12px 32px rgba(0, 0, 0, .48);
  --gohr-table-foot-shadow: 0 -8px 25px rgba(0, 0, 0, .35);
}