/* K&C internal tools: the one shared style sheet.
   Source of the look: the KC Check-in desk (apps/checkin), which follows the Avlez design system.
   Every internal tool imports this file and keeps only its own layout. Change a color, font or radius here, never in a tool.

   Contents: Gilroy faces, color tokens (light and dark), HeroUI theme mapping, and a few base pieces
   (page, card, section label, chip, top bar, logo). Class names are prefixed kc- so they never collide with a tool's own.
   Dark mode: a tool opts in by setting <html data-theme="dark">. Light is the default. */

/* ---- Gilroy (licensed brand face). Latin woff2 subsets. 600 uses the Bold file: Gilroy has no SemiBold. ---- */
@font-face { font-family: 'Gilroy'; src: url('./fonts/Gilroy-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('./fonts/Gilroy-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('./fonts/Gilroy-Bold.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('./fonts/Gilroy-Heavy.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* ---- tokens: light ---- */
:root, [data-theme="light"] {
  color-scheme: light;
  --kc-font: 'Gilroy', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --kc-tint: 43 58 107;                  /* navy as r g b, for shadows and lines */

  --kc-navy: #2B3A6B;                    /* text, headings, primary buttons */
  --kc-ink: #2B3A6B;
  --kc-mute: #56608C;                    /* secondary text */
  --kc-bg: #FFFFFF;                      /* page */
  --kc-card: #FFFFFF;                    /* cards sit on the page by shadow, not border */
  --kc-surface-1: #F8F9FC;               /* faint fill: open rows, card footers */
  --kc-surface-2: #EEF0F7;               /* quiet buttons, notices */
  --kc-surface-3: #E3E7F2;               /* hover on quiet things */
  --kc-line: rgb(43 58 107 / 14%);
  --kc-hair: rgb(43 58 107 / 9%);        /* row dividers */
  --kc-field-line: rgb(43 58 107 / 28%);
  --kc-sage: #7A9B76;                    /* the one accent */
  --kc-sage-soft: #CBDCC7;
  --kc-btn: #2B3A6B; --kc-on-btn: #FFFFFF; --kc-btn-ok: #2F6B4A;
  --kc-green: #2F6B4A; --kc-greenbg: #E4EFE7;
  --kc-amber: #70520F; --kc-amberbg: #FBF0D2;
  --kc-red: #8E302A;   --kc-redbg: #F7E8E6; --kc-red-solid: #C0443A;
  --kc-info: #345C76;  --kc-infobg: #E7F0F5;
  --kc-neutralfg: #4B4172; --kc-neutralbg: rgb(200 184 216 / 38%);
  --kc-focus: #1257B8;
  --kc-bar-bg: rgb(255 255 255 / 70%);

  --kc-radius: 20px;                     /* cards */
  --kc-radius-sm: 12px;                  /* buttons, inputs, notices */
  --kc-shadow: 0 1px 2px rgb(var(--kc-tint) / 4%), 0 8px 24px rgb(var(--kc-tint) / 6%);
  --kc-shadow-lg: 0 10px 30px rgb(var(--kc-tint) / 18%);

  /* HeroUI v3 theme -> K&C (same values as the check-in desk) */
  --background: var(--kc-bg); --foreground: var(--kc-ink);
  --surface: var(--kc-card); --surface-foreground: var(--kc-ink);
  --surface-secondary: var(--kc-surface-2); --surface-tertiary: var(--kc-surface-3);
  --overlay: var(--kc-card); --overlay-foreground: var(--kc-ink);
  --muted: var(--kc-mute);
  --accent: var(--kc-navy); --accent-foreground: #FFFFFF;
  --default: var(--kc-surface-2); --default-foreground: var(--kc-navy);
  --success: #2F7A55; --warning: #B97F0E; --danger: #B23A32;
  --segment: var(--kc-card); --segment-foreground: var(--kc-ink);
  --border: var(--kc-line); --separator: var(--kc-hair);
  --focus: var(--kc-focus); --link: var(--kc-navy);
  --field-background: var(--kc-card); --field-foreground: var(--kc-ink);
  --field-placeholder: var(--kc-mute); --field-border: var(--kc-field-line);
  --radius: .75rem;
}

/* ---- tokens: dark (opt-in) ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --kc-tint: 255 255 255;
  --kc-navy: #D8DEFF; --kc-ink: #F4F6FF; --kc-mute: #C2CAF0;
  --kc-bg: #122747; --kc-card: #1B3459;
  --kc-surface-1: #1F3A63; --kc-surface-2: #224070; --kc-surface-3: #2A4A7F;
  --kc-line: rgb(255 255 255 / 18%); --kc-hair: rgb(255 255 255 / 9%); --kc-field-line: rgb(255 255 255 / 28%);
  --kc-sage: #9ED0AE; --kc-sage-soft: rgb(79 191 127 / 30%);
  --kc-btn: #F0B942; --kc-on-btn: #122747; --kc-btn-ok: #2F8F5B;
  --kc-green: #79D9A0; --kc-greenbg: rgb(79 191 127 / 16%);
  --kc-amber: #F0C26A; --kc-amberbg: rgb(224 160 43 / 16%);
  --kc-red: #FF9C96;   --kc-redbg: rgb(229 72 77 / 18%);
  --kc-info: #93C8EA;  --kc-infobg: rgb(74 134 168 / 20%);
  --kc-neutralfg: #D7CCEA; --kc-neutralbg: rgb(200 184 216 / 20%);
  --kc-focus: #7AB0FF;
  --kc-bar-bg: rgb(18 39 71 / 80%);

  --accent: #F0B942; --accent-foreground: #122747;
  --success: #4FBF7F; --warning: #F0B942; --danger: #FF9892;
  --default: #33406F; --default-foreground: #F4F6FF;
}

/* ---- base ---- */
body { margin: 0; background: var(--kc-bg); color: var(--kc-ink); font: 400 15px/1.45 var(--kc-font); letter-spacing: .005em; }
:focus-visible { outline: 3px solid var(--kc-focus); outline-offset: 2px; }

.kc-card { background: var(--kc-card); border-radius: var(--kc-radius); box-shadow: var(--kc-shadow); }
.kc-label { font: 700 11px/1 var(--kc-font); letter-spacing: .14em; text-transform: uppercase; color: var(--kc-navy); opacity: .75; }
.kc-chip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 10px; border-radius: 99px; white-space: nowrap; }
.kc-chip.is-ok { color: var(--kc-green); background: var(--kc-greenbg); }
.kc-chip.is-warn { color: var(--kc-amber); background: var(--kc-amberbg); }
.kc-chip.is-bad { color: var(--kc-red); background: var(--kc-redbg); }
.kc-chip.is-info { color: var(--kc-info); background: var(--kc-infobg); }

/* top bar: logo + tool name, translucent over the page */
.kc-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--kc-bar-bg); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--kc-line); }
.kc-bar-title { font: 700 15px/1.1 var(--kc-font); letter-spacing: .08em; text-transform: uppercase; color: var(--kc-navy); }
.kc-bar-end { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 14px; }
.kc-logo { height: 36px; width: auto; display: block; }
[data-theme="dark"] .kc-logo { filter: brightness(0) invert(1); }

/* Icons: Lucide (see icons.txt, icons.js). Inline SVG that follows the text color and size. */
.kc-icon { flex: none; vertical-align: -0.18em; }
.kc-with-icon { display: inline-flex; align-items: center; gap: 8px; }