/* eleven-ops design tokens. docs/DESIGN.md explains every role; ops/dev/contrast.py measures them.
   Layer order for the whole system is declared once, here, in the first stylesheet loaded. */
@layer tokens, base, components, layouts;

@layer tokens {
  :root {
    /* Type: Vazirmatn subset only (D-020). 400 and 700 do the work; 500 for small labels. */
    --font: "Vazirmatn", system-ui, sans-serif;
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-28: 1.75rem;
    --lh: 1.7;
    --lh-tight: 1.35;

    /* Space: 4px rhythm */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;

    /* Radius is a role, not a default (brief 2) */
    --r-cell: 2px;
    --r-control: 6px;
    --r-sheet: 14px;

    /* Strip geometry */
    --cell-gap: 2px;
    --cell-h-comfortable: 2.5rem;
    --cell-h-compact: 1.125rem;
    --cell-h-mini: 0.5rem;

    /* Motion: state changes only (brief 6) */
    --dur: 160ms;
    --dur-fast: 120ms;
    --ease: cubic-bezier(0.23, 1, 0.32, 1);

    /* Layers */
    --z-sticky: 10;
    --z-dock: 20;
    --z-popover: 30;
    --z-toast: 40;

    --target: 2.75rem; /* 44px touch target */
    --tap-control: 2.25rem; /* manager controls on a laptop */

    color-scheme: dark;

    /* ---- Dark theme (default, designed first: night use, D-019) ---- */
    --bg: #0a192f;
    --surface-1: #0d1f3a;
    --surface-2: #112847;
    --surface-3: #183459;
    --line: #22395c;
    --line-strong: #6a83a8;
    --ink: #e9eef6;
    --ink-2: #b2c0d4;
    --ink-3: #8fa0b8;
    --ink-on-fill: #061223;
    --ink-on-blue: #ffffff;
    --ink-on-orange: #061223;

    --blue: #7fb0ff;
    --blue-fill: #1f6bff;
    --blue-fill-hover: #175ae6;
    --blue-wash: #13305c;
    --orange: #fd9a01;
    --orange-mark: #fd9a01;
    --orange-wash: #13233c;
    --focus: #9cc2ff;

    /* Segment states (brief 3): fill + the ink used inside a filled cell */
    --st-free-attention: #fd9a01;
    --st-free: #7389ab;
    --st-awaiting: #c7d2e3;
    --st-queued: #6e7f9b;
    --st-queued-ink: #061223;
    --st-queued-edge: #6e7f9b;
    --st-progress: #5c9dff;
    --st-progress-edge: #173f99;
    --st-progress-ink: #061223;
    --st-half: #e0814a;
    --st-half-stripe: #cc6f3a;
    --st-half-ink: #061223;
    --st-done: #24483a;
    --st-done-tick: #5fd39a;
    --st-done-ink: #d9f2e5;
    --st-problem: #ff6b6b;
    --st-suspended: #7d8799;
    --st-suspended-stripe: #767f91;
    --st-suspended-ink: #061223;

    --danger: #ff8080;
    --ok: #5fd39a;
  }

  /* ---- Light theme: same roles, values chosen for AA on a light ground ---- */
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f7fb;
    --surface-1: #eaeff6;
    --surface-2: #fcfdff;
    --surface-3: #dfe6f0;
    --line: #d3dbe7;
    --line-strong: #7a89a1;
    --ink: #0a192f;
    --ink-2: #3a4a63;
    --ink-3: #536279;
    --ink-on-fill: #0a192f;
    --ink-on-blue: #ffffff;
    --ink-on-orange: #ffffff;

    --blue: #0050d0;
    --blue-fill: #0257d8;
    --blue-fill-hover: #0049b8;
    --blue-wash: #e1ecff;
    --orange: #9a5400;
    --orange-mark: #c27400;
    --orange-wash: #edf1f7;
    --focus: #0050d0;

    --st-free-attention: #b06200;
    --st-free: #6b7a92;
    --st-awaiting: #36465f;
    --st-queued: #c3ccd9;
    --st-queued-ink: #0a192f;
    --st-queued-edge: #7a89a1;
    --st-progress: #2266d8;
    --st-progress-edge: #a9c8ff;
    --st-progress-ink: #ffffff;
    --st-half: #d0702f;
    --st-half-stripe: #dc8146;
    --st-half-ink: #0a192f;
    --st-done: #d3e6da;
    --st-done-tick: #1d7f4f;
    --st-done-ink: #0a192f;
    --st-problem: #d42a2a;
    --st-suspended: #848d9e;
    --st-suspended-stripe: #959dac;
    --st-suspended-ink: #0a192f;

    --danger: #c41e1e;
    --ok: #1d7f4f;
  }

  /* Follow the system when nobody chose a theme (no data-theme on <html>). */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      color-scheme: light;
      --bg: #f5f7fb;
      --surface-1: #eaeff6;
      --surface-2: #fcfdff;
      --surface-3: #dfe6f0;
      --line: #d3dbe7;
      --line-strong: #7a89a1;
      --ink: #0a192f;
      --ink-2: #3a4a63;
      --ink-3: #536279;
      --ink-on-fill: #0a192f;
      --ink-on-blue: #ffffff;
      --ink-on-orange: #ffffff;
      --blue: #0050d0;
      --blue-fill: #0257d8;
      --blue-fill-hover: #0049b8;
      --blue-wash: #e1ecff;
      --orange: #9a5400;
      --orange-mark: #c27400;
      --orange-wash: #edf1f7;
      --focus: #0050d0;
      --st-free-attention: #b06200;
      --st-free: #6b7a92;
      --st-awaiting: #36465f;
      --st-queued: #c3ccd9;
      --st-queued-ink: #0a192f;
      --st-queued-edge: #7a89a1;
      --st-progress: #2266d8;
      --st-progress-edge: #a9c8ff;
      --st-progress-ink: #ffffff;
      --st-half: #d0702f;
      --st-half-stripe: #dc8146;
      --st-half-ink: #0a192f;
      --st-done: #d3e6da;
      --st-done-tick: #1d7f4f;
      --st-done-ink: #0a192f;
      --st-problem: #d42a2a;
      --st-suspended: #848d9e;
      --st-suspended-stripe: #959dac;
      --st-suspended-ink: #0a192f;
      --danger: #c41e1e;
      --ok: #1d7f4f;
    }
  }
}