/* Design tokens for the shoe-sample management system.
 *
 * Per the UI reference docs: flat (no shadows/gradients/glow), blue primary,
 * red danger, green done, neutral grey skeleton. Every colour is a token so
 * light/dark both stay readable — never hardcode a grey in components.
 */

:root {
  color-scheme: light;

  /* Primary (blue): brand, links, active/in-progress, primary actions, focus */
  --color-primary: #0071e3;
  --color-primary-strong: #005bb5;
  --color-primary-soft: #eaf4ff;
  --color-on-primary-soft: #00539f;
  --color-on-primary: #ffffff;

  /* Danger (red): exceptions, warnings, destructive actions — used sparingly */
  --color-danger: #e24b4a;
  --color-danger-soft: #fcebeb;
  --color-on-danger-soft: #a32d2d;
  --color-danger-border: rgba(186, 40, 40, 0.18);

  /* Success (green): completed */
  --color-success: #1d9e75;
  --color-success-soft: #e1f5ee;
  --color-on-success-soft: #0f6e56;
  --color-success-border: rgba(31, 122, 77, 0.18);

  /* Warn (amber): medium confidence, soft import notices */
  --color-warn: #c98a1e;
  --color-warn-soft: #fbf0d9;
  --color-on-warn-soft: #875309;

  /* Neutral skeleton */
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;
  --color-surface-muted: #f0f2f5;   /* metric cards: slightly deeper than page */
  --color-border: rgba(23, 32, 51, 0.10);
  --color-border-strong: rgba(23, 32, 51, 0.20);

  /* Text: three levels */
  --color-text: #1d1d1f;
  --color-text-muted: #6e6e73;
  --color-text-faint: #9a9aa0;

  /* Semantic status families (pills): done/active/pending/error.
   * Each: a soft background + an on-colour text from the same family. */
  --state-done-bg: var(--color-success-soft);
  --state-done-fg: var(--color-on-success-soft);
  --state-done-dot: var(--color-success);
  --state-active-bg: var(--color-primary-soft);
  --state-active-fg: var(--color-on-primary-soft);
  --state-active-dot: var(--color-primary);
  --state-pending-bg: #eef1f5;
  --state-pending-fg: #5e6b7d;
  --state-pending-dot: #9aa6b5;
  --state-error-bg: var(--color-danger-soft);
  --state-error-fg: var(--color-on-danger-soft);
  --state-error-dot: var(--color-danger);

  /* Category pills (non-semantic, e.g. sample source): must NOT use state colours */
  --tag-a-bg: var(--color-primary-soft);
  --tag-a-fg: var(--color-on-primary-soft);
  --tag-b-bg: #eef1f5;
  --tag-b-fg: #5e6b7d;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius (only on fully-bordered elements; never on single-side accent bars) */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Type scale (nothing below 11px); two weights only */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;   /* sparingly: big metric numbers / key headings */
  --line-height: 1.6;

  /* Motion: functional, restrained. Ease-out (fast then slow). */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;     /* hover feedback */
  --dur-enter: 500ms;    /* card/section entrance */
  --dur-grow: 1000ms;    /* progress bar / counter */

  /* Elevation — restrained. Hierarchy still comes mostly from spacing + hairline
   * borders; these add just enough lift that surfaces read as layered, not cheap. */
  --shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.05), 0 1px 1px rgba(23, 32, 51, 0.03);
  --shadow-md: 0 2px 8px rgba(23, 32, 51, 0.07), 0 1px 2px rgba(23, 32, 51, 0.04);
  --shadow-lg: 0 12px 30px rgba(23, 32, 51, 0.10), 0 2px 6px rgba(23, 32, 51, 0.05);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #4d9fe6;
  --color-primary-strong: #6cb0ec;
  --color-primary-soft: #16314a;
  --color-on-primary-soft: #9fccf0;
  --color-on-primary: #0b1622;

  --color-danger: #ef6f6e;
  --color-danger-soft: #3a1f20;
  --color-on-danger-soft: #f0a8a7;
  --color-danger-border: rgba(239, 111, 110, 0.30);

  --color-success: #3bbf95;
  --color-success-soft: #14302a;
  --color-on-success-soft: #7fd9bd;
  --color-success-border: rgba(59, 191, 149, 0.30);

  --color-warn: #e0aa4e;
  --color-warn-soft: #34290f;
  --color-on-warn-soft: #e8c483;

  --color-bg: #0f141b;
  --color-surface: #161d27;
  --color-surface-muted: #1d2733;
  --color-border: rgba(220, 230, 245, 0.16);
  --color-border-strong: rgba(220, 230, 245, 0.30);

  --color-text: #e6ecf4;
  --color-text-muted: #a7b2c2;
  --color-text-faint: #7e8b9c;

  --state-pending-bg: #1d2733;
  --state-pending-fg: #a7b2c2;
  --state-pending-dot: #6c7a8c;
  --tag-b-bg: #1d2733;
  --tag-b-fg: #a7b2c2;

  /* Shadows read deeper on a dark canvas; keep them soft, not crunchy. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55);
}