/* Design tokens: every colour, space, radius and size used by the UI.
   /theme.css overrides --color-primary and the shades derived from it
   (--color-on-primary, --color-primary-hover, --color-primary-text); the
   values here are those of the default #5862ec (brand «Flickering Sea»). */

:root {
  --color-primary: #5862ec;
  --color-primary-hover: #4b53c9;
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --color-on-primary: #ffffff;
  /* The primary colour as text, icons and indicators: 4.5:1 on every surface. */
  --color-primary-text: #545de0;

  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #f0f2f5;
  --color-border: #d9dde3;
  --color-border-strong: #b9c0ca;
  /* Edges of inputs and switches: at least 3:1 on the surfaces (WCAG 1.4.11). */
  --color-control-border: #7d8693;
  --color-text: #1b1f24;
  --color-text-muted: #5b6470;
  --color-focus: var(--color-primary-text);

  --color-danger: #c62828;
  --color-danger-soft: #fdecec;
  --color-success: #1b7f3b;
  --color-success-soft: #e7f5ec;
  --color-warning: #8a5a00;
  --color-warning-soft: #fff4d6;
  --color-info: #1d5fbf;
  --color-info-soft: #e8f0fc;
  /* Text and icons on solid danger / success / warning fills. */
  --color-on-danger: #ffffff;
  --color-on-success: #ffffff;
  --color-on-warning: #ffffff;

  /* Task status colours (badges always carry the status text too). */
  --status-draft: #5f6b7a;
  --status-open: #1d63d6;
  --status-assigned: #7b3fc4;
  --status-accepted: #6a2fb0;
  --status-in-progress: #c25400;
  --status-on-hold: #8f6a00;
  --status-completed: #2f8f4e;
  --status-closed: #14532d;
  --status-cancelled: #c62828;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --leading: 1.6;

  --font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 10%);
  --touch: 44px;
  --sidebar-width: 248px;
  --bottombar-height: 64px;
  --transition: 150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary-soft: color-mix(in srgb, var(--color-primary) 22%, transparent);
    --color-primary-text: #7981f0;
    --color-bg: #0f1216;
    --color-surface: #171b21;
    --color-surface-2: #1f242b;
    --color-border: #2c333c;
    --color-border-strong: #3d4651;
    --color-control-border: #6b7684;
    --color-text: #e8ebef;
    --color-text-muted: #9aa4b1;
    --color-danger: #ff6b6b;
    --color-danger-soft: #3a1717;
    --color-success: #4cc27a;
    --color-success-soft: #13291c;
    --color-warning: #f0bf4c;
    --color-warning-soft: #2e2510;
    --color-info: #6ea8ff;
    --color-info-soft: #14233a;
    --color-on-danger: #111418;
    --color-on-success: #111418;
    --color-on-warning: #111418;
    --status-draft: #9aa4b1;
    --status-open: #6ea8ff;
    --status-assigned: #b98cf0;
    --status-accepted: #c9a3f5;
    --status-in-progress: #ff9a4d;
    --status-on-hold: #f0bf4c;
    --status-completed: #6fd394;
    --status-closed: #3fae68;
    --status-cancelled: #ff6b6b;
    --shadow-md: 0 4px 16px rgb(0 0 0 / 40%);
  }
}

:root[data-theme="dark"] {
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 22%, transparent);
  --color-primary-text: #7981f0;
  --color-bg: #0f1216;
  --color-surface: #171b21;
  --color-surface-2: #1f242b;
  --color-border: #2c333c;
  --color-border-strong: #3d4651;
  --color-control-border: #6b7684;
  --color-text: #e8ebef;
  --color-text-muted: #9aa4b1;
  --color-danger: #ff6b6b;
  --color-danger-soft: #3a1717;
  --color-success: #4cc27a;
  --color-success-soft: #13291c;
  --color-warning: #f0bf4c;
  --color-warning-soft: #2e2510;
  --color-info: #6ea8ff;
  --color-info-soft: #14233a;
  --color-on-danger: #111418;
  --color-on-success: #111418;
  --color-on-warning: #111418;
  --status-draft: #9aa4b1;
  --status-open: #6ea8ff;
  --status-assigned: #b98cf0;
  --status-accepted: #c9a3f5;
  --status-in-progress: #ff9a4d;
  --status-on-hold: #f0bf4c;
  --status-completed: #6fd394;
  --status-closed: #3fae68;
  --status-cancelled: #ff6b6b;
  --shadow-md: 0 4px 16px rgb(0 0 0 / 40%);
}