/* Design tokens (B6, RD-1): paya's computed values (docs/raw/design/paya/DESIGN.md §2 + the html snapshots).
   Dark is the default; light comes from `data-theme="light"` on <html> (static/js/theme.js) or, with no choice
   stored and no JS, from `prefers-color-scheme: light`. Every colour of the site is read from here. */
:root, .theme-dark {
  color-scheme: dark;
  --bg-layout: #060b1a;
  --surface: #0c1326;
  --surface-muted: #111a30;
  --surface-raised: #151e36;
  --surface-side: #0f1730;
  --surface-hover: #ffffff0a;
  --scrim-top: #060b1a1a;
  --scrim: #00000073;
  --th-bg: #161c2f;
  --th-sorted: #292f40;
  --row-line: #292f42;
  --row-open: #111a30;
  --border-hairline: #bfc1d324;
  --border-hairline-soft: #bfc1d31a;
  --border-hairline-strong: #bfc1d33d;
  --border-table: #bfc1d329;
  --border-input: #3e4456;
  --separator: #ebeafd21;
  --text-strong: #ffffff;
  --text-body: #ffffffd9;
  --text-head: #ffffffeb;
  --text-muted: #ffffffad;
  --text-subtle: #ffffff8c;
  --text-placeholder: #ffffff80;
  --text-faint: #ffffff61;
  --text-company: #ffffff80;
  --primary: #5953f6;
  --primary-hover: #7a75f8;
  --primary-shadow: #ccb3fa40;
  --accent: #9a96ff;           /* the user's name, group «درخواست‌ها», icon boxes, «افزودن» */
  --accent-tint: #5953f61a;
  --accent-deep: #3a3399;
  --sort-icon: #9a96ffa6;
  --link: #5c99dc;
  --inverse: #e9ebf3;
  --text-on-inverse: #060b1a;
  --on-primary: #ffffff;
  --select-bg: #ffffff14;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffffad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  --segment-track: #060b1a;
  --segment-thumb: #151e36;
  --outline-shadow: #ffffff0a;
  --danger: #dc5e5e;
  --danger-icon: #ff7875;
  --danger-tint: #dc5e5e1f;
  --badge-count: #d92d20;
  --glass: #ffffff0f;
  --shadow-pop: 0 6px 16px #00000052, 0 3px 6px -4px #0000007a, 0 9px 28px 8px #00000033;
  --shadow-soft: 0 1px 2px #00000008, 0 1px 6px -1px #00000005, 0 2px 4px #00000005;
  --hero-bg: radial-gradient(120% 140% at 0% 100%, #4a44d6, #2c2890 38%, #14123c 72%, #0a0920);
  --hero-ink: #1b1850;
  /* groups (home chips, module cards) */
  --group-requests: #9a96ff;
  --group-field: #83d2d0;
  --group-hse: #d8b787;
  --group-proj: #bbd990;
  --group-watch: #cc8fd0;
  /* tags and states */
  --tag-in: #69b1ff;   --tag-in-bg: #1677ff29;
  --tag-out: #c3a0f2;  --tag-out-bg: #b37feb24;
  --ok: #86dfa6;       --ok-line: #22c55e;   --ok-bg: #22c55e20;
  --rag-green: #0eba49; --rag-green-bg: #0eba4924;
  --rag-amber: #ffa132; --rag-amber-bg: #ffa13224;
  --rag-red: #ff4d4f;   --rag-red-bg: #ff4d4f24;
  --warn: #ffc069;     --warn-bg: #ffa13224;
  --err: #ff7875;      --err-bg: #ff4d4f1f;
  --info: #69b1ff;     --info-bg: #1677ff29;
  --review: #ffa940;   --review-bg: #fa8c1624;
  --busy-bg: #ffa132;  --busy-ink: #3a2200;
  --priority-low: #2c66ff; --priority-medium: #f7ab00; --priority-urgent: #f45830;
  --progress-done: #41bd4d; --progress-mid: #3662ff;
  /* shape */
  --radius-card: 16px; --radius-hero: 22px; --radius-input: 12px; --radius-button: 10px; --radius-tag: 4px;
  --radius-pill: 999px; --radius-icon: 8px; --radius-table: 10px; --radius-modal: 10px;
  /* type */
  --font-sans: "IRANSansXFaNum", "Vazirmatn", Tahoma, sans-serif;
  --font-latin: "IRANSansX", "Vazirmatn", Tahoma, sans-serif;
  --font-mono: Consolas, Menlo, monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 30px;
  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --control-h: 32px;
  --topbar-h: 68px;
  --nav-h: 66px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 180ms;
}

/* light: the tokens paya uses with its light theme (.theme-light: a light island, used by /ui/) */
:root[data-theme="light"], .theme-light {
  color-scheme: light;
  --bg-layout: #edf0f6;
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --surface-raised: #ffffff;
  --surface-side: #f7f8fa;
  --surface-hover: #0000000a;
  --scrim-top: #ffffff1a;
  --th-bg: #fafafa;
  --th-sorted: #f0f0f0;
  --row-line: #f0f0f0;
  --row-open: #fafafa;
  --border-hairline: #0000000f;
  --border-hairline-soft: #0000000d;
  --border-hairline-strong: #0000001a;
  --border-table: #0000000f;
  --border-input: #d9d9d9;
  --separator: #0505050f;
  --text-strong: #000000;
  --text-body: #1c1b1f;
  --text-head: #000000e0;
  --text-muted: #000000a6;
  --text-subtle: #00000073;
  --text-placeholder: #8c8c8c;
  --text-faint: #00000040;
  --text-company: #00000045;
  --primary-shadow: #3705ff0f;
  --accent: #5953f6;
  --accent-tint: #5953f61a;
  --accent-deep: #1f194d;
  --sort-icon: #5953f6a6;
  --link: #1677ff;
  --inverse: #1c1b1f;
  --text-on-inverse: #ffffff;
  --select-bg: #0000000a;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300000073' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  --segment-track: #edf0f6;
  --segment-thumb: #ffffff;
  --outline-shadow: #00000005;
  --danger: #e5484d;
  --danger-icon: #f5222d;
  --danger-tint: #e5484d14;
  --glass: #0000000a;
  --shadow-pop: 0 6px 16px #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
  --hero-bg: radial-gradient(120% 140% at 0% 100%, #5953f6, #3b36b8, #1b1850 70%, #0f0d2e);
  --group-requests: #5953f6;
  --tag-in: #1b65dc;   --tag-in-bg: #e6f4ff;
  --tag-out: #5b27af;  --tag-out-bg: #faf2ff;
  --ok: #16a34a;       --ok-bg: #22c55e20;
  --rag-green-bg: #e6f9ec; --rag-amber-bg: #fff3e0; --rag-red-bg: #ffecec;
  --warn: #ad6800;     --warn-bg: #fff3e0;
  --err: #cf1322;      --err-bg: #fff1f0;
  --info: #1b65dc;     --info-bg: #e6f4ff;
  --review: #d4380d;   --review-bg: #fff2e8;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg-layout: #edf0f6; --surface: #ffffff; --surface-muted: #fafafa; --surface-raised: #ffffff; --surface-side: #f7f8fa;
    --surface-hover: #0000000a; --scrim-top: #ffffff1a; --th-bg: #fafafa; --th-sorted: #f0f0f0; --row-line: #f0f0f0;
    --row-open: #fafafa; --border-hairline: #0000000f; --border-hairline-soft: #0000000d; --border-hairline-strong: #0000001a;
    --border-table: #0000000f; --border-input: #d9d9d9; --separator: #0505050f; --text-strong: #000000; --text-body: #1c1b1f;
    --text-head: #000000e0; --text-muted: #000000a6; --text-subtle: #00000073; --text-placeholder: #8c8c8c;
    --text-faint: #00000040; --text-company: #00000045; --primary-shadow: #3705ff0f; --accent: #5953f6; --accent-deep: #1f194d;
    --sort-icon: #5953f6a6; --link: #1677ff; --inverse: #1c1b1f; --text-on-inverse: #ffffff; --select-bg: #0000000a;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300000073' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
    --segment-track: #edf0f6; --segment-thumb: #ffffff; --outline-shadow: #00000005; --danger: #e5484d; --danger-icon: #f5222d;
    --danger-tint: #e5484d14; --glass: #0000000a;
    --shadow-pop: 0 6px 16px #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
    --hero-bg: radial-gradient(120% 140% at 0% 100%, #5953f6, #3b36b8, #1b1850 70%, #0f0d2e); --group-requests: #5953f6;
    --tag-in: #1b65dc; --tag-in-bg: #e6f4ff; --tag-out: #5b27af; --tag-out-bg: #faf2ff; --ok: #16a34a;
    --rag-green-bg: #e6f9ec; --rag-amber-bg: #fff3e0; --rag-red-bg: #ffecec; --warn: #ad6800; --warn-bg: #fff3e0;
    --err: #cf1322; --err-bg: #fff1f0; --info: #1b65dc; --info-bg: #e6f4ff; --review: #d4380d; --review-bg: #fff2e8;
  }
}

/* re-declared wherever a theme is set, so they follow that theme (/ui/ shows both side by side) */
:root, .theme-dark, .theme-light {
  /* legacy names (pages styled before B6 read these; they now point at the tokens above) */
  --bg: var(--bg-layout);
  --surface-2: var(--surface-muted);
  --line: var(--border-hairline);
  --line-strong: var(--border-hairline-strong);
  --control-border: var(--border-input);
  --ink: var(--text-strong);
  --ink-2: var(--text-body);
  --text: var(--text-body);
  --muted: var(--text-muted);
  --yellow: var(--primary);
  --yellow-press: var(--primary-hover);
  --yellow-soft: var(--accent-tint);
  --r-sm: var(--radius-button); --r: var(--radius-card); --r-lg: var(--radius-hero); --r-pill: var(--radius-pill);
  --shadow-1: none; --shadow-2: var(--shadow-soft); --shadow-3: var(--shadow-pop);
  --font: var(--font-sans);
}