/* BEEPO design tokens. Every colour and font in the store comes from here. */
:root {
  /* Brand */
  --yellow: #FFC107;
  --yellow-ink: #3A2A00;          /* text on yellow, AA contrast */
  --navy: #0B1F3A;
  --navy-2: #13294B;
  --navy-3: #1C3660;
  --cyan: #00B8D9;
  --cyan-ink: #006A7E;            /* cyan dark enough for text on white */
  --orange: #FF6B2C;
  --orange-ink: #B53D0A;          /* orange for text on white */

  /* Surfaces (light) */
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #F7F8FB;
  --line: #DDE2EA;
  --line-strong: #C3CAD6;
  --text: #16213A;
  --text-2: #4A5672;
  --text-3: #6B7690;
  --link: #0A5AA8;

  /* Status */
  --ok: #157F3B;
  --ok-bg: #E6F5EC;
  --warn: #8A5A00;
  --warn-bg: #FFF5D6;
  --bad: #C62828;
  --bad-bg: #FDECEC;
  --info: #0B6E85;
  --info-bg: #E2F6FA;

  /* Header always navy, in both themes */
  --hdr-bg: var(--navy);
  --hdr-text: #FFFFFF;
  --hdr-muted: #B9C4D8;

  /* Type */
  --font-head: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head-stretch: 112%;          /* headings run slightly expanded, like equipment labels */
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;

  /* Shape and space (tight, marketplace density) */
  --r-sm: 3px;
  --r: 5px;
  --r-lg: 8px;
  --gap: 12px;
  --gap-lg: 20px;
  --wrap: 1320px;
  --shadow: 0 1px 0 rgba(11, 31, 58, .06);
  --shadow-pop: 0 12px 32px -8px rgba(11, 31, 58, .28);
  --focus: 0 0 0 3px var(--cyan);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 180ms;
}

/* Dark theme: follows the OS unless the moon button forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1322;
    --surface: #111D33;
    --surface-2: #16243F;
    --line: #24365A;
    --line-strong: #34497A;
    --text: #E8EDF6;
    --text-2: #B5C0D6;
    --text-3: #8B98B4;
    --link: #6CC4FF;
    --cyan-ink: #4FD6EE;
    --orange-ink: #FF9A6B;
    --ok: #5FD38A;
    --ok-bg: #0F2E1D;
    --warn: #FFD166;
    --warn-bg: #2E2508;
    --bad: #FF8A80;
    --bad-bg: #3A1414;
    --info: #6FE0F5;
    --info-bg: #0B2A33;
    --hdr-bg: #07152A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1322;
  --surface: #111D33;
  --surface-2: #16243F;
  --line: #24365A;
  --line-strong: #34497A;
  --text: #E8EDF6;
  --text-2: #B5C0D6;
  --text-3: #8B98B4;
  --link: #6CC4FF;
  --cyan-ink: #4FD6EE;
  --orange-ink: #FF9A6B;
  --ok: #5FD38A;
  --ok-bg: #0F2E1D;
  --warn: #FFD166;
  --warn-bg: #2E2508;
  --bad: #FF8A80;
  --bad-bg: #3A1414;
  --info: #6FE0F5;
  --info-bg: #0B2A33;
  --hdr-bg: #07152A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .55);
  color-scheme: dark;
}