/* ==========================================================================
   Shite Shifters design tokens. Every page loads this file, then ui.css (the components).
   Colours, type, sizes, corners and spacing live here: change one and it changes everywhere.
   ========================================================================== */

@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-sans-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }

:root {
  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: var(--font-sans);
  --font-code: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* location codes, SKUs, barcodes, kbd */
  --font-num: var(--font-sans);           /* counts and money: tabular figures */
  --code-features: normal;

  --fs-xs:   0.75rem;    /* 12px  table headers, pills, kbd */
  --fs-sm:   0.8125rem;  /* 13px  labels, meta lines */
  --fs-desc: 0.875rem;   /* 14px  descriptions, secondary text, buttons */
  --fs-base: 0.9375rem;  /* 15px  body, inputs */
  --fs-md:   1.0625rem;  /* 17px  page and card titles, the logo */
  --fs-lg:   1.25rem;    /* 20px  emphasised figures */
  --fs-xl:   1.5rem;     /* 24px  stat values */
  --fs-2xl:  1.75rem;    /* 28px  sign-in wordmark, hero numbers */
  --fs-input: var(--fs-base);

  /* Printed labels use physical sizes so they come out the same on every printer */
  --fs-print-xs: 6.5pt;
  --fs-print-sm: 7.5pt;
  --fs-print-md: 9pt;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 700;
  --lh-tight: 1.25;
  --lh-body: 1.5;
  --ls-head: 0;
  --ls-code: 0;
  --ls-caps: 0;

  /* Colours (light) */
  --bg: #ffffff;              /* page */
  --panel: #ffffff;           /* cards */
  --sunk: #f6f7f8;            /* surface-subtle: table headers, "next" blocks, hover */
  --field: #ffffff;           /* inputs */
  --ink: #111418;             /* text, dark buttons */
  --muted: #5b6470;           /* secondary text, labels */
  --line: #e3e6ea;            /* card borders, dividers */
  --line-strong: #cdd2d8;     /* inputs, secondary buttons */
  --track: #edeff2;           /* progress track */
  --accent: #0b7a4b;          /* brand green: active tab, "do it" buttons */
  --accent-hover: #096a41;
  --accent-ink: #ffffff;
  --accent-soft: #e7f4ee;     /* status pill */
  --accent-soft-ink: #0b6b42;
  --accent-soft-hover: #cfe9dc;  /* remove button on a tag */
  --chart-2: #4cc38a;         /* charts: the second series (the first is --accent) */
  --chart-3: #a9dec3;         /* charts: the third series, and "so far" in an open month */
  --chart-amber: #e2b54a;     /* charts: a middling band between ok and warning */
  --placeholder: #8a929c;     /* placeholders, an empty select or date */
  --line-hover: #9aa2ac;      /* a field's border on hover */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%235b6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --brand: var(--accent);
  --navy: #334155;
  --ok: #0b7a4b;   --ok-bg: #e7f4ee;
  --warn: #8a5a00; --warn-bg: #fdf3e1; --warn-dot: #c98a0b;
  --bad: #b42318;  --bad-bg: #fdedec;
  --bar: #ffffff; --bar-ink: #111418; --bar-muted: #5b6470; --bar-line: #e3e6ea;

  /* Shape and depth */
  --r: 10px;        /* cards */
  --r-md: 8px;      /* panels and boxes inside cards */
  --r-sm: 8px;      /* inputs and buttons */
  --r-xs: 6px;      /* tags, code pills */
  --r-pill: 999px;
  --shadow: none;   /* the page is white: borders do the separating */
  --shadow-pop: 0 12px 40px rgba(17, 20, 24, 0.18);
  --shadow-menu: 0 8px 24px rgba(17, 20, 24, 0.12);   /* dropdown menus */
  --shadow-seg: 0 1px 2px rgba(17, 20, 24, 0.12);     /* the chosen part of a segmented control */

  /* Controls */
  --ctl-h: 40px;        /* inputs and buttons */
  --ctl-h-sm: 36px;     /* compact buttons: card actions */
  --ctl-h-xs: 32px;     /* chips, disclosure */

  /* Spacing */
  --sp-page: 24px;      /* page padding */
  --sp-card: 20px;      /* card padding */
  --gap-cards: 16px;    /* between cards */
  --gap-in: 16px;       /* inside cards */
  --gap-ctl: 8px;       /* between sibling controls */
  --wrap: 760px;        /* stock app column */
  --wrap-wide: 1040px;  /* office pages */
  --wrap-desk: 1320px;  /* the stock app on a laptop or desktop (1100px and up) */
  --wrap-home: 1200px;  /* the home page: companies and each company's tiles */
  /* company marks on the home page (initials on a soft tint), given out in turn */
  --tint-1: var(--accent-soft); --tint-1-ink: var(--accent-soft-ink);
  --tint-2: #eaf0fb; --tint-2-ink: #2a4f8f;
  --tint-3: #fdf3e1; --tint-3-ink: #8a5a00;
  --tint-4: #f1ecfb; --tint-4-ink: #5b3b9a;
  --tile-hover: #fbfcfc;
  --plan-grid: #eef0f2;       /* floor plan: the grid on the warehouse floor */
  --plan-wall: var(--ink);    /* floor plan: the outside walls */
  --plan-custom: #eef0f2;     /* floor plan: a bay with its own size, not a rack size */
  color-scheme: light;
}

/* Colours (dark): follows the phone or computer setting */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116; --panel: #13171d; --sunk: #191e25; --field: #0f1318;
    --ink: #e8ebef; --muted: #9aa3ae; --line: #252b33; --line-strong: #39414c; --track: #252b33;
    --accent: #2fb47a; --accent-hover: #3cc489; --accent-ink: #04210f; --accent-soft: #10291d; --accent-soft-ink: #5fd6a0; --accent-soft-hover: #183d2b;
    --placeholder: #6b7480; --line-hover: #56606c; --warn-dot: #f0b85a;
    --chart-2: #2a8f61; --chart-3: #1d5a3f; --chart-amber: #c99a2e;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239aa3ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.5);
    --navy: #93a8c4;
    --ok: #3cc489; --ok-bg: #10291d; --warn: #f0b85a; --warn-bg: #2d2210; --bad: #f2786d; --bad-bg: #331614;
    --bar: #0e1116; --bar-ink: #e8ebef; --bar-muted: #9aa3ae; --bar-line: #252b33;
    --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.5);
    --tint-2: #142238; --tint-2-ink: #8fb2ec; --tint-3: #2d2210; --tint-3-ink: #f0b85a; --tint-4: #221a33; --tint-4-ink: #b9a0ec; --tile-hover: #161b22; --plan-grid: #1d232b; --plan-custom: #252b33;
    color-scheme: dark;
  }
}

/* Phones: inputs stay at 16px so iPhones don't zoom the page when you tap one */
@media (pointer: coarse) { :root { --fs-input: 1rem; } }
@media (max-width: 480px) { :root { --sp-page: 16px; --sp-card: 16px; } }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: var(--ls-head); line-height: var(--lh-tight); overflow-wrap: break-word; }
table, .num, .mono, .kpi b, .stat b { font-variant-numeric: tabular-nums; }
.code, .mono, input.code, .loc-pill, .scan-code, kbd { font-family: var(--font-code); font-weight: var(--fw-medium); }
input.code::placeholder { font-family: var(--font-sans); font-weight: var(--fw-regular); }
::placeholder { font-weight: var(--fw-regular); color: var(--placeholder); opacity: 1; }
/* small labels: table headers, stat labels (sentence case) */
th, .caps { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); text-transform: none; letter-spacing: 0; }