/* tokens.css - Image Cropper rebuild 2026-09-17. Verbatim :root + dark from mock-shared.css. */
:root {
  color-scheme: light;
  --background: #ffffff;        /* paper ground: the two strips */
  --foreground: #1f1c26;
  --card: #f6f4fa;              /* the table: warm light lavender-grey field, filmstrip rail */
  --card-foreground: #1f1c26;
  --muted: #ece7f5;             /* hover fills, blank thumb cells */
  --muted-foreground: #5b5566;  /* violet-tinted ink, never neutral grey */
  --primary: #6d28d9;
  --primary-foreground: #ffffff;
  --primary-foreground-dim: #e9ddfb;  /* the size line inside an active place chip */
  --primary-hover: #5b21b6;
  --primary-soft: #f1e9fd;      /* active ratio chip fill */
  --rule: #6f6880;              /* ruler ticks and figures */
  --veil: rgb(31 28 38 / .40);  /* everything outside the frame */
  --border: #e6e2ee;
  --ring: var(--primary);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-pill: 999px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 14px;
  --text-sm: 12px;
  --text-xs: 11px;
  --text-readout: 15px;
  --text-tick: 10px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --pad-pill-y: 3px;
  --strip-top: 56px;
  --strip-bottom: 60px;
  --film: 88px;
  --thumb: 72px;
  --ruler-h: 22px;
  --tick-minor: 5px;
  --tick-major: 10px;
  --hairline: 1px;
  --border-width: 1px;
  --outline-width: 2px;
  --destructive: #b3261e;
  --destructive-foreground: #ffffff;
  --frame-rule: 2px;
  --handle: 10px;
  --handle-hit: 24px;
  --veil-spread: 100vmax;
  --chip-h: 38px;
  --ratio-h: 28px;
  --btn-h: 36px;
  --btn-h-sm: 28px;
  --more-h: 34px;
  --icon: 24px;
  --icon-glyph: 16px;
  --mark: 20px;
  --mark-radius: 5px;
  --pic-aspect: 1.4995;         /* 1600 / 1067, the sample sheet */
  --pic-ratio: 1600 / 1067;
  --chrome: calc(var(--strip-top) + var(--strip-bottom) + var(--ruler-h) + var(--space-6) * 2);
  --duration-fast: 120ms;       /* chip fills */
  --duration-frame: 200ms;      /* frame moves, labels counting */
  --duration-max: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --target-min: 44px;
  --shadow: 0 6px 18px -8px rgb(31 28 38 / .30);
  --shadow-raised: 0 1px 2px rgb(31 28 38 / .14);
  --shadow-pill: 0 1px 3px -1px rgb(31 28 38 / .28);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #16151a; --foreground: #e8e5ee; --card: #1d1b23; --card-foreground: #e8e5ee;
    --muted: #2a2733; --muted-foreground: #a9a3b6; --rule: #9a93aa;
    --primary: #a78bfa; --primary-foreground: #24123f; --primary-foreground-dim: #3a2160;
    --primary-hover: #c4b5fd; --primary-soft: #2b2140;
    --veil: rgb(8 7 12 / .55); --border: #34313d;
    --shadow: 0 6px 18px -8px rgb(0 0 0 / .65);
    --shadow-raised: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-pill: 0 1px 3px -1px rgb(0 0 0 / .6);
  }
}
/* @pair --foreground on --background */
/* @pair --foreground on --card */
/* @pair --muted-foreground on --background */
/* @pair --muted-foreground on --card */
/* @pair --rule on --card */
/* @pair --primary-foreground on --primary */
/* @pair --primary-foreground-dim on --primary */
/* @pair --primary on --primary-soft */
/* @pair --primary on --background */


/* One frame at a time (owner rule 10.09): every focusable control draws its ring ON the border,
   never outside it; nothing falls back to the browser ring. Product rules may override. */
:where(input, select, textarea, button, [tabindex]):focus-visible {
  outline: var(--outline-width, 2px) solid var(--ring, currentColor);
  outline-offset: calc(-1 * var(--border-width, 1px));
}

:where(input, select, textarea)[aria-invalid='true']:focus-visible {
  outline-color: var(--destructive, currentColor);
}