/*
 * WorkFlow design tokens.
 *
 * Every colour, radius and dimension used anywhere in the UI is declared here.
 * Components reference tokens only — no raw hex values in component CSS — so
 * rebranding or adding a theme is a change to this file alone.
 */

:root {
  color-scheme: light;

  /* ---- surfaces ---- */
  --background: #ffffff;
  --background-subtle: #f7f8f9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-hover: #f4f5f7;
  --surface-active: #ebedf0;
  --surface-sunken: #f1f2f4;
  --sidebar-background: #1e1f21;
  --sidebar-surface-hover: #2a2b2d;
  --sidebar-surface-active: #35363a;
  --overlay: rgba(23, 25, 28, 0.4);

  /* ---- text ---- */
  --text-primary: #1e1f21;
  --text-secondary: #6d6e6f;
  --text-tertiary: #9ca1a8;
  --text-inverse: #ffffff;
  --sidebar-text: #d9dbdd;
  --sidebar-text-muted: #9096a1;

  /* ---- lines ---- */
  --border: #e4e6e9;
  --border-strong: #cdd1d6;
  --border-focus: #4573d2;
  --sidebar-border: #35363a;

  /* ---- brand + semantics ---- */
  --accent: #4573d2;
  --accent-hover: #3a63b8;
  --accent-active: #325499;
  --accent-soft: #eaf0fb;
  --accent-text: #2f5bb0;

  --success: #1f9d6b;
  --success-soft: #e6f5ef;
  --warning: #d98d2b;
  --warning-soft: #fdf2e3;
  --danger: #d1435b;
  --danger-soft: #fceaed;
  --info: #4573d2;
  --info-soft: #eaf0fb;
  --neutral-soft: #eef0f2;

  /* ---- priority ---- */
  --priority-urgent: #d1435b;
  --priority-high: #e07b39;
  --priority-medium: #d9a41f;
  --priority-low: #7f8b99;

  /* ---- avatar palette (index 0-7) ---- */
  --avatar-0: #4573d2;
  --avatar-1: #9c6ade;
  --avatar-2: #1f9d6b;
  --avatar-3: #d98d2b;
  --avatar-4: #d1435b;
  --avatar-5: #2f9bb3;
  --avatar-6: #b3559b;
  --avatar-7: #6b7a8f;

  /* ---- layout ---- */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 60px;
  --topbar-height: 48px;
  --project-header-height: 96px;
  --drawer-width: 520px;
  --row-height: 38px;
  --content-max-width: 1680px;

  /* ---- shape ---- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px rgba(23, 25, 28, 0.08);
  --shadow: 0 2px 8px rgba(23, 25, 28, 0.1);
  --shadow-lg: 0 8px 28px rgba(23, 25, 28, 0.16);
  --shadow-drawer: -8px 0 32px rgba(23, 25, 28, 0.12);

  /* ---- type ---- */
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;

  /* ---- spacing ---- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;

  /* ---- motion ---- */
  --transition-fast: 90ms ease;
  --transition: 150ms ease;
}

/*
 * Dark theme.
 *
 * Only token values change — no component carries a dark-mode branch. The rules
 * are duplicated for the explicit choice (data-theme="dark") and for the system
 * preference when no choice has been made, so the toggle wins in both directions.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --background: #1a1b1d;
  --background-subtle: #1e1f21;
  --surface: #232426;
  --surface-raised: #2a2b2e;
  --surface-hover: #2c2d30;
  --surface-active: #35363a;
  --surface-sunken: #1a1b1d;
  --sidebar-background: #131416;
  --sidebar-surface-hover: #202124;
  --sidebar-surface-active: #2a2b2e;
  --overlay: rgba(0, 0, 0, 0.6);

  --text-primary: #e8eaed;
  --text-secondary: #a5a9ae;
  --text-tertiary: #767b82;
  --text-inverse: #1a1b1d;
  --sidebar-text: #d0d3d7;
  --sidebar-text-muted: #85898f;

  --border: #34363a;
  --border-strong: #45484d;
  --sidebar-border: #26282b;

  --accent: #6f97e0;
  --accent-hover: #86a9e8;
  --accent-active: #9bb9ee;
  --accent-soft: #23304a;
  --accent-text: #9bb9ee;

  --success: #43b98a;
  --success-soft: #1c3a2e;
  --warning: #e0a44f;
  --warning-soft: #3d2f19;
  --danger: #e0687d;
  --danger-soft: #3d1f26;
  --info: #6f97e0;
  --info-soft: #23304a;
  --neutral-soft: #2c2d30;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
  --shadow-drawer: -8px 0 32px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --background: #1a1b1d;
    --background-subtle: #1e1f21;
    --surface: #232426;
    --surface-raised: #2a2b2e;
    --surface-hover: #2c2d30;
    --surface-active: #35363a;
    --surface-sunken: #1a1b1d;
    --sidebar-background: #131416;
    --sidebar-surface-hover: #202124;
    --sidebar-surface-active: #2a2b2e;
    --overlay: rgba(0, 0, 0, 0.6);

    --text-primary: #e8eaed;
    --text-secondary: #a5a9ae;
    --text-tertiary: #767b82;
    --text-inverse: #1a1b1d;
    --sidebar-text: #d0d3d7;
    --sidebar-text-muted: #85898f;

    --border: #34363a;
    --border-strong: #45484d;
    --sidebar-border: #26282b;

    --accent: #6f97e0;
    --accent-hover: #86a9e8;
    --accent-active: #9bb9ee;
    --accent-soft: #23304a;
    --accent-text: #9bb9ee;

    --success: #43b98a;
    --success-soft: #1c3a2e;
    --warning: #e0a44f;
    --warning-soft: #3d2f19;
    --danger: #e0687d;
    --danger-soft: #3d1f26;
    --info: #6f97e0;
    --info-soft: #23304a;
    --neutral-soft: #2c2d30;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
    --shadow-drawer: -8px 0 32px rgba(0, 0, 0, 0.5);
  }
}