/* Karl Senner brand layer. Loaded after the PrimeReact base theme so these
   tokens win the cascade. Chrome tokens (--ks-*) drive our own shell; the
   --primary-* overrides retint PrimeReact components to Senner Blue. */

:root {
  --ks-senner-blue: #2058a5;
  --ks-oxford-blue: #173b65;
  --ks-pacific-navy: #082644;
  --ks-sandpiper-gold: #c09c63;

  --ks-ocean-gradient: linear-gradient(135deg, #082644 0%, #173b65 50%, #2058a5 100%);

  --ks-radius: 0.625rem;

  --ks-font-body: 'Barlow', system-ui, sans-serif;
  --ks-font-heading: 'Epilogue', system-ui, sans-serif;
  --ks-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Chrome tokens — remapped in dark mode below. */
  --ks-content-bg: hsl(210 25% 98%);
  --ks-sidebar-bg: #ffffff;
  --ks-sidebar-border: hsl(210 20% 90%);
  --ks-sidebar-text: var(--ks-pacific-navy);
  --ks-sidebar-hover-bg: hsl(210 40% 96%);
  --ks-sidebar-active-bg: hsl(214 60% 95%);
  --ks-sidebar-width: 16rem;
  --ks-header-height: 4rem;
  --ks-content-max: 1400px;

  /* Retint PrimeReact primary to Senner Blue. */
  --primary-color: var(--ks-senner-blue);
  --primary-color-text: #ffffff;

  /* Status semantics — drive stat tiles, badges and card accent bars. */
  --ks-info: #2563eb;
  --ks-success: #15803d;
  --ks-warning: #b45309;
  --ks-danger: #b91c1c;
  --ks-muted-text: hsl(210 12% 45%);
  --ks-surface: #ffffff;
  --ks-surface-border: hsl(210 20% 90%);
  --ks-surface-subtle: hsl(210 40% 97%);

  /* Senner Blue is too dark to read on the dark surfaces; this lifts in dark. */
  --ks-accent-blue: var(--ks-senner-blue);

  /* One focus ring for the controls we hand-roll; PrimeReact brings its own. */
  --ks-focus-outline: 2px solid var(--ks-accent-blue);

  /* The time-entry categories. Their own hues rather than the status set, because they are read side by
     side in one grid and one legend, and have to stay apart from each other rather than from a state.
     Thirteen codes is most of the wheel: comp time's teal is the closest call, against Shop General. */
  --ks-cat-shop: #ca8a04;
  --ks-cat-dock: #2563eb;
  --ks-cat-water: #0891b2;
  --ks-cat-standby: #64748b;
  --ks-cat-travel: #ea580c;
  --ks-cat-shop-general: #059669;
  --ks-cat-bereavement: #78716c;
  --ks-cat-comp-time: #0d9488;
  --ks-cat-work-comp: #dc2626;
  --ks-cat-holiday: #7c3aed;
  --ks-cat-pto: #65a30d;
  --ks-cat-office-closure: #db2777;
  --ks-cat-admin-general: #4f46e5;
}

:root[data-theme='dark'] {
  --ks-content-bg: #0b1a2b;
  --ks-sidebar-bg: #0f2337;
  --ks-sidebar-border: #1c3550;
  --ks-sidebar-text: #e6edf5;
  --ks-sidebar-hover-bg: #16304a;
  --ks-sidebar-active-bg: #1b3c5e;

  --ks-info: #60a5fa;
  --ks-success: #4ade80;
  --ks-warning: #fbbf24;
  --ks-danger: #f87171;
  --ks-muted-text: #93a4b8;
  --ks-surface: #0f2337;
  --ks-surface-border: #1c3550;
  --ks-surface-subtle: #16304a;
  --ks-accent-blue: #7fb2f7;

  --ks-cat-shop: #facc15;
  --ks-cat-dock: #60a5fa;
  --ks-cat-water: #22d3ee;
  --ks-cat-standby: #94a3b8;
  --ks-cat-travel: #fb923c;
  --ks-cat-shop-general: #34d399;
  --ks-cat-bereavement: #a8a29e;
  --ks-cat-comp-time: #2dd4bf;
  --ks-cat-work-comp: #f87171;
  --ks-cat-holiday: #a78bfa;
  --ks-cat-pto: #a3e635;
  --ks-cat-office-closure: #f472b6;
  --ks-cat-admin-general: #818cf8;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--ks-font-body);
  color: var(--text-color);
  background: var(--ks-content-bg);
}

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

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