/* ============================================================
 * Work is 1 — Tokens
 * Layered on top of Wanted Sans design system.
 * Overrides brand to Indigo per spec, adds dark theme,
 * status/priority/workspace palettes.
 * ============================================================ */

@import url("./wanted-tokens.css");

:root,
[data-theme="light"] {
  /* Work is 1 brand — Indigo (spec) overrides Wanted blue */
  --brand-primary:       #4F46E5;
  --brand-primary-hover: #4338CA;
  --brand-primary-press: #3730A3;
  --brand-primary-soft:  #EEF2FF;
  --fg-link:             #4F46E5;
  --border-focus:        #4F46E5;
  --alpha-primary-08:    rgba(79, 70, 229, 0.08);
  --alpha-primary-16:    rgba(79, 70, 229, 0.16);

  /* Status colors (Work is 1 spec) */
  --status-pending:      #9CA3AF;
  --status-pending-soft: #F3F4F6;
  --status-progress:     #3B82F6;
  --status-progress-soft:#EFF6FF;
  --status-review:       #F59E0B;
  --status-review-soft:  #FFFBEB;
  --status-completed:    #10B981;
  --status-completed-soft:#ECFDF5;
  --status-rejected:     #EF4444;
  --status-rejected-soft:#FEF2F2;
  --status-canceled:     #6B7280;
  --status-canceled-soft:#F3F4F6;

  /* Priority */
  --priority-urgent:     #DC2626;
  --priority-urgent-soft:#FEF2F2;
  --priority-high:       #EA580C;
  --priority-high-soft:  #FFF7ED;
  --priority-normal:     #6B7280;
  --priority-normal-soft:#F3F4F6;

  /* Workspace palette (12) — used as dots/labels */
  --ws-1:  #6366F1;
  --ws-2:  #8B5CF6;
  --ws-3:  #EC4899;
  --ws-4:  #EF4444;
  --ws-5:  #F97316;
  --ws-6:  #EAB308;
  --ws-7:  #84CC16;
  --ws-8:  #22C55E;
  --ws-9:  #14B8A6;
  --ws-10: #06B6D4;
  --ws-11: #3B82F6;
  --ws-12: #64748B;

  /* Sidebar / chrome */
  --chrome-bg:        var(--cool-neutral-98);
  --chrome-border:    var(--border-subtle);
  --chrome-hover:     var(--alpha-neutral-08);
  --chrome-active-bg: var(--brand-primary-soft);
  --chrome-active-fg: var(--brand-primary);

  /* Misc */
  --kpi-card-bg:      var(--surface-elevated);
}

[data-theme="dark"] {
  /* Atomic shifts: surface stack inverted */
  --surface-background:     #0B1020;
  --surface-background-alt: #0F1530;
  --surface-elevated:       #121933;
  --surface-overlay:        rgba(0, 0, 0, 0.72);
  --surface-inverse:        #F1F5F9;

  /* Text */
  --fg-primary:    #E7ECFF;
  --fg-secondary:  #B7BFE0;
  --fg-tertiary:   #9AA3C7;
  --fg-disabled:   #5C6691;
  --fg-on-primary: #FFFFFF;

  /* Brand stays Indigo, slightly brighter for dark contrast */
  --brand-primary:       #818CF8;
  --brand-primary-hover: #6366F1;
  --brand-primary-press: #4F46E5;
  --brand-primary-soft:  rgba(99, 102, 241, 0.16);
  --fg-link:             #A5B4FC;
  --border-focus:        #818CF8;

  /* Borders */
  --border-subtle:   #1A2243;
  --border-default:  #1F2747;
  --border-strong:   #2A3567;

  /* Interaction */
  --interaction-assistive: rgba(255, 255, 255, 0.06);
  --interaction-hover:     rgba(255, 255, 255, 0.06);
  --interaction-press:     rgba(255, 255, 255, 0.12);

  /* Status — softs use translucent overlays so they read on dark surfaces */
  --status-pending:       #9CA3AF;
  --status-pending-soft:  rgba(156, 163, 175, 0.16);
  --status-progress:      #60A5FA;
  --status-progress-soft: rgba(96, 165, 250, 0.16);
  --status-review:        #FBBF24;
  --status-review-soft:   rgba(251, 191, 36, 0.16);
  --status-completed:     #34D399;
  --status-completed-soft:rgba(52, 211, 153, 0.16);
  --status-rejected:      #F87171;
  --status-rejected-soft: rgba(248, 113, 113, 0.16);
  --status-canceled:      #9CA3AF;
  --status-canceled-soft: rgba(156, 163, 175, 0.14);

  --priority-urgent:      #F87171;
  --priority-urgent-soft: rgba(248, 113, 113, 0.16);
  --priority-high:        #FB923C;
  --priority-high-soft:   rgba(251, 146, 60, 0.16);
  --priority-normal:      #9CA3AF;
  --priority-normal-soft: rgba(156, 163, 175, 0.14);

  /* Chrome */
  --chrome-bg:        #0F1530;
  --chrome-border:    #1A2243;
  --chrome-hover:     rgba(255, 255, 255, 0.04);
  --chrome-active-bg: rgba(129, 140, 248, 0.14);
  --chrome-active-fg: #C7CFFF;

  --kpi-card-bg:      var(--surface-elevated);

  /* Shadows muted on dark */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-4: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ============================================================
 * Reset + base
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
html { background: var(--surface-background); color: var(--fg-primary); }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; color: inherit; }
a { color: var(--fg-link); text-decoration: none; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-primary-soft); color: var(--brand-primary-press); }
[data-theme="dark"] ::selection { color: var(--fg-primary); }

/* Scrollbars — subtle */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--alpha-neutral-16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--alpha-neutral-22); background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }