/*
  QR Manager design tokens
  Direction A, "Instrument": minimal, warm grayscale, square corners.
  Source palette: Derby Teal (primary brown, vivid teal, accent pudding, warm gray).

  Usage: load this file before components.css. Use the semantic tokens
  (--qm-*) in product code. The primitive ramps (--dt-*) exist so semantic
  tokens can be traced back to the palette; do not use them directly in
  components.

  Theme: light by default. Dark applies when the OS prefers dark, unless the
  page sets <html data-theme="light">. <html data-theme="dark"> forces dark.
*/

:root {
  /* ---------- Primitive ramps (Derby Teal) ---------- */
  --dt-primary-5: #fff9f7;
  --dt-primary-10: #fff4ef;
  --dt-primary-20: #f3d6c9;
  --dt-primary-30: #e4bba8;
  --dt-primary-40: #ba8a73;
  --dt-primary-50: #8a5941;
  --dt-primary-60: #452f23;
  --dt-primary-70: #2f1f16;
  --dt-primary-80: #2c180e;
  --dt-primary-90: #22140d;

  --dt-vivid-5: #f7fdff;
  --dt-vivid-10: #e7f8ff;
  --dt-vivid-20: #a5e1fa;
  --dt-vivid-30: #72d3f8;
  --dt-vivid-40: #10b3e1;
  --dt-vivid-50: #007190;
  --dt-vivid-60: #005167;
  --dt-vivid-70: #003242;
  --dt-vivid-80: #00232f;
  --dt-vivid-90: #001821;

  --dt-accent-5: #fff8eb;
  --dt-accent-10: #ffebc7;
  --dt-accent-15: #f5dbaa;
  --dt-accent-20: #eacd98;
  --dt-accent-30: #ddbc84;
  --dt-accent-40: #c39c50;
  --dt-accent-50: #876208;
  --dt-accent-60: #634600;
  --dt-accent-70: #412d00;
  --dt-accent-80: #312100;
  --dt-accent-90: #241800;

  --dt-gray-0: #ffffff;
  --dt-gray-1: #fcfbfa;
  --dt-gray-3: #f7f5f3;
  --dt-gray-5: #f6f3ee;
  --dt-gray-10: #eae3db;
  --dt-gray-20: #dcccbc;
  --dt-gray-30: #b9a694;
  --dt-gray-40: #958c81;
  --dt-gray-50: #675f54;
  --dt-gray-60: #4c453c;
  --dt-gray-70: #3e3831;
  --dt-gray-80: #36312b;
  --dt-gray-90: #26231f;
  --dt-gray-100: #000000;

  /* Placeholder status ramp (not in Derby Teal). Replace when real status ramps arrive. */
  --ph-green-10: #e6f4ea;
  --ph-green-50: #2e7d45;
  --ph-green-70: #1e5631;
  --ph-green-dark-bg: #24402c;
  --ph-green-dark-icon: #7ccb91;
  --ph-green-dark-text: #b9e6c4;

  /* Derived, not in Derby Teal: hat band in the brand mark. */
  --brand-band: #5e4535;
  --brand-band-small: #6b4e3d;

  /* ---------- Typography ---------- */
  --qm-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --qm-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --qm-text-label: 11px;   /* mono, uppercase, letter-spacing .04em: column headers, field captions */
  --qm-text-xs: 12px;      /* meta lines, IDs, chips */
  --qm-text-sm: 13px;      /* compact buttons, helper text */
  --qm-text-md: 14px;      /* body and controls (default) */
  --qm-text-lg: 16px;      /* mobile primary button */
  --qm-text-xl: 18px;      /* sheet titles */
  --qm-text-2xl: 20px;     /* detail panel title */
  --qm-text-3xl: 22px;     /* mobile page title, big numbers */
  --qm-text-4xl: 24px;     /* desktop page title */

  --qm-weight-regular: 400;
  --qm-weight-medium: 500;
  --qm-weight-semibold: 600;

  --qm-leading-tight: 1.2;
  --qm-leading-normal: 1.45;

  --qm-tracking-label: 0.04em;
  --qm-tracking-title: -0.01em;

  /* ---------- Spacing (4px base, with 2px half steps where noted) ---------- */
  --qm-space-0: 0;
  --qm-space-1: 2px;
  --qm-space-2: 4px;
  --qm-space-3: 6px;
  --qm-space-4: 8px;
  --qm-space-5: 10px;
  --qm-space-6: 12px;
  --qm-space-7: 14px;
  --qm-space-8: 16px;
  --qm-space-10: 20px;
  --qm-space-12: 24px;
  --qm-space-14: 28px;
  --qm-space-16: 32px;
  --qm-space-20: 40px;
  --qm-space-24: 48px;
  --qm-space-32: 64px;

  /* ---------- Radius ---------- */
  --qm-radius-none: 0;     /* buttons, chips, badges, fields at rest, tiles, cards, sheets */
  --qm-radius-focus: 4px;  /* a text field while it has focus (open question: may become 0) */

  /* ---------- Sizing ---------- */
  --qm-control-sm: 32px;   /* row actions on desktop */
  --qm-control-md: 40px;   /* desktop buttons and fields */
  --qm-control-touch: 44px;/* minimum touch target on phone */
  --qm-control-lg: 48px;   /* phone text fields */
  --qm-control-xl: 52px;   /* phone primary action */
  --qm-rail-width: 64px;
  --qm-detail-min: 340px;
  --qm-qr-thumb: 44px;     /* list row preview tile (36px code inside) */
  --qm-qr-detail: 200px;   /* detail panel tile (168px code inside) */

  /* ---------- Borders and elevation ---------- */
  --qm-border-width: 1px;
  --qm-focus-width: 2px;
  --qm-elevation-0: none;  /* the UI is flat; separation comes from borders and fills */
  --qm-scrim: rgba(38, 35, 31, 0.45);

  /* ---------- Motion ---------- */
  --qm-duration-fast: 120ms;
  --qm-duration-base: 200ms;
  --qm-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Breakpoints (reference only; CSS vars cannot be used in media queries) ----------
     phone: < 768px     bottom tabs, full-screen detail, bottom sheets
     tablet: 768–1199px rail + list; detail opens full page
     desktop: >= 1200px rail + list + detail panel
  */

  /* ---------- Semantic: light ---------- */
  color-scheme: light;
  --qm-bg-canvas: var(--dt-gray-0);
  --qm-bg-rail: var(--dt-gray-0);
  --qm-bg-surface: var(--dt-gray-3);     /* inline repoint row, subtle wells */
  --qm-bg-panel: var(--dt-gray-1);       /* detail panel */
  --qm-bg-selected: var(--dt-gray-5);    /* selected list row */
  --qm-bg-attention: var(--dt-gray-5);   /* needs-attention strip */

  --qm-border-subtle: var(--dt-gray-10); /* dividers, row lines, tile edges */
  --qm-border-control: var(--dt-gray-40);/* fields, secondary buttons (3:1 on canvas) */

  --qm-text-default: var(--dt-gray-60);  /* body: 9.4:1 on canvas */
  --qm-text-muted: var(--dt-gray-50);    /* secondary: 6.3:1 on canvas */
  --qm-text-strong: var(--dt-gray-90);   /* names, titles, numbers: 15.6:1 */
  --qm-text-link: var(--dt-vivid-60);

  --qm-brand-mark: var(--dt-primary-60);

  --qm-action-primary-bg: var(--dt-vivid-60);
  --qm-action-primary-text: var(--dt-gray-0);
  --qm-action-secondary-bg: var(--dt-gray-0);
  --qm-action-secondary-text: var(--dt-gray-90);

  --qm-focus-ring: var(--dt-vivid-50);
  --qm-focus-halo: var(--dt-vivid-20);

  --qm-nav-active-bg: var(--dt-gray-90);
  --qm-nav-active-text: var(--dt-gray-0);
  --qm-nav-text: var(--dt-gray-50);

  --qm-qr-tile-bg: var(--dt-gray-0);     /* QR previews always sit on white so they scan */

  /* Status: active (placeholder green), paused (disabled gray), retired (dashed outline) */
  --qm-status-active-bg: var(--ph-green-10);
  --qm-status-active-text: var(--ph-green-70);
  --qm-status-active-icon: var(--ph-green-50);
  --qm-status-active-border: var(--ph-green-10);

  --qm-status-paused-bg: var(--dt-gray-10);
  --qm-status-paused-text: var(--dt-gray-50);
  --qm-status-paused-icon: var(--dt-gray-40);
  --qm-status-paused-border: var(--dt-gray-10);

  --qm-status-retired-bg: transparent;
  --qm-status-retired-text: var(--dt-gray-50);
  --qm-status-retired-icon: var(--dt-gray-40);
  --qm-status-retired-border: var(--dt-gray-40);
  --qm-status-retired-border-style: dashed;

  --qm-row-paused-opacity: 0.55;         /* QR preview in a paused row */
  --qm-row-retired-opacity: 0.4;         /* QR preview in a retired row */

  /* Categories: chip = category, tag = sub-category in the same hue */
  --qm-cat-brown-bg: var(--dt-primary-20);
  --qm-cat-brown-text: var(--dt-primary-70);
  --qm-cat-brown-tag-bg: var(--dt-primary-10);
  --qm-cat-brown-tag-border: var(--dt-primary-30);
  --qm-cat-brown-tag-text: var(--dt-primary-60);

  --qm-cat-teal-bg: var(--dt-vivid-20);
  --qm-cat-teal-text: var(--dt-vivid-70);
  --qm-cat-teal-tag-bg: var(--dt-vivid-10);
  --qm-cat-teal-tag-border: var(--dt-vivid-30);
  --qm-cat-teal-tag-text: var(--dt-vivid-60);

  --qm-cat-gold-bg: var(--dt-accent-20);
  --qm-cat-gold-text: var(--dt-accent-70);
  --qm-cat-gold-tag-bg: var(--dt-accent-5);
  --qm-cat-gold-tag-border: var(--dt-accent-30);
  --qm-cat-gold-tag-text: var(--dt-accent-60);

  --qm-cat-gray-bg: var(--dt-gray-10);
  --qm-cat-gray-text: var(--dt-gray-90);
  --qm-cat-gray-tag-bg: var(--dt-gray-1);
  --qm-cat-gray-tag-border: var(--dt-gray-20);
  --qm-cat-gray-tag-text: var(--dt-gray-60);
}

/* ---------- Semantic: dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --qm-bg-canvas: var(--dt-gray-80);
    --qm-bg-rail: var(--dt-gray-70);
    --qm-bg-surface: var(--dt-gray-70);
    --qm-bg-panel: var(--dt-gray-70);
    --qm-bg-selected: #413b33;
    --qm-bg-attention: #443e37;
    --qm-border-subtle: var(--dt-gray-60);
    --qm-border-control: var(--dt-gray-40);
    --qm-text-default: var(--dt-gray-20);
    --qm-text-muted: var(--dt-gray-30);
    --qm-text-strong: var(--dt-gray-3);
    --qm-text-link: var(--dt-vivid-30);
    --qm-brand-mark: var(--dt-accent-20);
    --qm-action-primary-bg: var(--dt-vivid-30);
    --qm-action-primary-text: var(--dt-vivid-90);
    --qm-action-secondary-bg: var(--dt-gray-80);
    --qm-action-secondary-text: var(--dt-gray-3);
    --qm-focus-ring: var(--dt-vivid-30);
    --qm-focus-halo: var(--dt-vivid-60);
    --qm-nav-active-bg: var(--dt-gray-3);
    --qm-nav-active-text: var(--dt-gray-90);
    --qm-nav-text: var(--dt-gray-30);
    --qm-status-active-bg: var(--ph-green-dark-bg);
    --qm-status-active-text: var(--ph-green-dark-text);
    --qm-status-active-icon: var(--ph-green-dark-icon);
    --qm-status-active-border: var(--ph-green-dark-bg);
    --qm-status-paused-bg: #443e37;
    --qm-status-paused-text: #cdbcab;
    --qm-status-paused-icon: var(--dt-gray-40);
    --qm-status-paused-border: #443e37;
    --qm-status-retired-text: var(--dt-gray-30);
    --qm-status-retired-border: var(--dt-gray-50);
    --qm-cat-brown-bg: var(--dt-primary-60);
    --qm-cat-brown-text: var(--dt-primary-20);
    --qm-cat-brown-tag-bg: transparent;
    --qm-cat-brown-tag-border: var(--dt-primary-50);
    --qm-cat-brown-tag-text: var(--dt-primary-30);
    --qm-cat-teal-bg: var(--dt-vivid-70);
    --qm-cat-teal-text: var(--dt-vivid-20);
    --qm-cat-teal-tag-bg: transparent;
    --qm-cat-teal-tag-border: var(--dt-vivid-50);
    --qm-cat-teal-tag-text: var(--dt-vivid-30);
    --qm-cat-gold-bg: var(--dt-accent-70);
    --qm-cat-gold-text: var(--dt-accent-15);
    --qm-cat-gold-tag-bg: transparent;
    --qm-cat-gold-tag-border: var(--dt-accent-50);
    --qm-cat-gold-tag-text: var(--dt-accent-20);
    --qm-cat-gray-bg: var(--dt-gray-60);
    --qm-cat-gray-text: var(--dt-gray-3);
    --qm-cat-gray-tag-bg: transparent;
    --qm-cat-gray-tag-border: var(--dt-gray-50);
    --qm-cat-gray-tag-text: var(--dt-gray-20);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --qm-bg-canvas: var(--dt-gray-80);
  --qm-bg-rail: var(--dt-gray-70);
  --qm-bg-surface: var(--dt-gray-70);
  --qm-bg-panel: var(--dt-gray-70);
  --qm-bg-selected: #413b33;
  --qm-bg-attention: #443e37;
  --qm-border-subtle: var(--dt-gray-60);
  --qm-border-control: var(--dt-gray-40);
  --qm-text-default: var(--dt-gray-20);
  --qm-text-muted: var(--dt-gray-30);
  --qm-text-strong: var(--dt-gray-3);
  --qm-text-link: var(--dt-vivid-30);
  --qm-brand-mark: var(--dt-accent-20);
  --qm-action-primary-bg: var(--dt-vivid-30);
  --qm-action-primary-text: var(--dt-vivid-90);
  --qm-action-secondary-bg: var(--dt-gray-80);
  --qm-action-secondary-text: var(--dt-gray-3);
  --qm-focus-ring: var(--dt-vivid-30);
  --qm-focus-halo: var(--dt-vivid-60);
  --qm-nav-active-bg: var(--dt-gray-3);
  --qm-nav-active-text: var(--dt-gray-90);
  --qm-nav-text: var(--dt-gray-30);
  --qm-status-active-bg: var(--ph-green-dark-bg);
  --qm-status-active-text: var(--ph-green-dark-text);
  --qm-status-active-icon: var(--ph-green-dark-icon);
  --qm-status-active-border: var(--ph-green-dark-bg);
  --qm-status-paused-bg: #443e37;
  --qm-status-paused-text: #cdbcab;
  --qm-status-paused-icon: var(--dt-gray-40);
  --qm-status-paused-border: #443e37;
  --qm-status-retired-text: var(--dt-gray-30);
  --qm-status-retired-border: var(--dt-gray-50);
  --qm-cat-brown-bg: var(--dt-primary-60);
  --qm-cat-brown-text: var(--dt-primary-20);
  --qm-cat-brown-tag-bg: transparent;
  --qm-cat-brown-tag-border: var(--dt-primary-50);
  --qm-cat-brown-tag-text: var(--dt-primary-30);
  --qm-cat-teal-bg: var(--dt-vivid-70);
  --qm-cat-teal-text: var(--dt-vivid-20);
  --qm-cat-teal-tag-bg: transparent;
  --qm-cat-teal-tag-border: var(--dt-vivid-50);
  --qm-cat-teal-tag-text: var(--dt-vivid-30);
  --qm-cat-gold-bg: var(--dt-accent-70);
  --qm-cat-gold-text: var(--dt-accent-15);
  --qm-cat-gold-tag-bg: transparent;
  --qm-cat-gold-tag-border: var(--dt-accent-50);
  --qm-cat-gold-tag-text: var(--dt-accent-20);
  --qm-cat-gray-bg: var(--dt-gray-60);
  --qm-cat-gray-text: var(--dt-gray-3);
  --qm-cat-gray-tag-bg: transparent;
  --qm-cat-gray-tag-border: var(--dt-gray-50);
  --qm-cat-gray-tag-text: var(--dt-gray-20);
}