/* LabelFlow design tokens — "Contemporary Print Workshop".
   Teal = application actions. Blue = canvas selection. Nothing else is accent. */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg-app: #F3F5F6;
  --bg-panel: #FFFFFF;
  --bg-canvas: #E9EDF0;
  --bg-sunken: #EEF1F3;      /* input wells, segmented-control track */
  --bg-hover: #EBEFF2;
  --bg-active: #DFE5EA;
  --bg-overlay: rgb(24 35 45 / 0.36);

  /* Text */
  --text: #18232D;
  --text-2: #596875;
  --text-3: #6E7C88;         /* placeholder, disabled — still ≥ 4.5:1 on panel */
  --text-on-accent: #FFFFFF;

  /* Lines */
  --border: #D5DDE3;
  --border-strong: #B9C4CC;
  --divider: #E4E9ED;

  /* Accents */
  --accent: #087F79;
  --accent-hover: #066B66;
  --accent-soft: #E1F1EF;
  --select: #2675D8;
  --select-soft: rgb(38 117 216 / 0.12);
  --guide: #D6337A;          /* snap/alignment guides: must not read as selection */
  --warning: #B56A12;
  --warning-soft: #FBF0E1;
  --error: #C23B3B;
  --error-soft: #FBE9E9;
  --success: #2E7D4F;

  /* Paper — labels are always white stock, in both themes */
  --paper: #FFFFFF;
  --paper-shadow: 0 1px 2px rgb(24 35 45 / 0.18), 0 2px 8px rgb(24 35 45 / 0.08);
  --bleed-line: #C23B3B;
  --safe-line: #2E8F86;

  /* Elevation (used sparingly: menus, popovers, sheets) */
  --shadow-1: 0 1px 2px rgb(24 35 45 / 0.08);
  --shadow-pop: 0 4px 12px rgb(24 35 45 / 0.12), 0 1px 3px rgb(24 35 45 / 0.10);
  --shadow-sheet: 0 -2px 16px rgb(24 35 45 / 0.14);

  /* Type */
  --font-ui: "Inter", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --fs-title: 18px;
  --fs-panel: 13px;
  --fs-section: 12px;
  --fs-body: 14px;
  --fs-label: 12.5px;
  --fs-input: 14px;
  --fs-help: 12px;
  --fs-toolbar: 12px;
  --fs-status: 11.5px;
  --lh-tight: 1.25;
  --lh: 1.45;

  /* Spacing (4px scale) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-sheet: 16px;

  /* Desktop dimensions */
  --appbar-h: 52px;
  --toolbar-h: 44px;
  --left-w: 256px;
  --right-w: 288px;
  --status-h: 28px;
  --input-h: 36px;
  --btn-h: 38px;
  --icon-btn: 36px;
  --touch: 44px;

  /* Motion */
  --t-fast: 120ms;
  --t-state: 170ms;
  --t-drawer: 220ms;
  --t-sheet: 260ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);

  --focus-ring: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent);
}

/* Touch devices get roomier controls automatically. */
@media (pointer: coarse) {
  :root {
    --input-h: 44px;
    --btn-h: 44px;
    --icon-btn: 44px;
    --fs-input: 16px; /* prevents iOS zoom-on-focus */
  }
}

/* Dark values. Applied when the OS is dark (unless forced light) or forced dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-app: #171D22;
    --bg-panel: #222A30;
    --bg-canvas: #12171B;
    --bg-sunken: #1B2227;
    --bg-hover: #2A333A;
    --bg-active: #333D45;
    --bg-overlay: rgb(0 0 0 / 0.5);
    --text: #F0F3F5;
    --text-2: #AAB7C1;
    --text-3: #8F9DA8;
    --text-on-accent: #0E1A1A;
    --border: #39444D;
    --border-strong: #4C5862;
    --divider: #2E373E;
    --accent: #49B9AD;
    --accent-hover: #63C9BE;
    --accent-soft: rgb(73 185 173 / 0.16);
    --select: #69A5F5;
    --select-soft: rgb(105 165 245 / 0.16);
    --guide: #F06AA6;
    --warning: #E0A050;
    --warning-soft: rgb(224 160 80 / 0.14);
    --error: #EE7A7A;
    --error-soft: rgb(238 122 122 / 0.14);
    --success: #6CC793;
    --paper-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 10px rgb(0 0 0 / 0.5);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-pop: 0 6px 16px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.06);
    --shadow-sheet: 0 -2px 18px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #171D22;
  --bg-panel: #222A30;
  --bg-canvas: #12171B;
  --bg-sunken: #1B2227;
  --bg-hover: #2A333A;
  --bg-active: #333D45;
  --bg-overlay: rgb(0 0 0 / 0.5);
  --text: #F0F3F5;
  --text-2: #AAB7C1;
  --text-3: #8F9DA8;
  --text-on-accent: #0E1A1A;
  --border: #39444D;
  --border-strong: #4C5862;
  --divider: #2E373E;
  --accent: #49B9AD;
  --accent-hover: #63C9BE;
  --accent-soft: rgb(73 185 173 / 0.16);
  --select: #69A5F5;
  --select-soft: rgb(105 165 245 / 0.16);
  --guide: #F06AA6;
  --warning: #E0A050;
  --warning-soft: rgb(224 160 80 / 0.14);
  --error: #EE7A7A;
  --error-soft: rgb(238 122 122 / 0.14);
  --success: #6CC793;
  --paper-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 10px rgb(0 0 0 / 0.5);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-pop: 0 6px 16px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-sheet: 0 -2px 18px rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-state: 0ms; --t-drawer: 0ms; --t-sheet: 0ms; }
}