:root {
  /* Brand purple (#613d97, sampled from public/NKE.png — the pixel that
     covers 53.5% of its opaque area). WCAG contrast against white text is
     8.01:1 (AAA) versus 4.70:1 (AA, barely) for the indigo this replaces —
     matching the brand was not a trade-off against accessibility here. */
  --color-primary: #613d97;
  --color-primary-hover: #543582;
  --color-primary-focus: #613d97;
  --color-on-primary: #ffffff;
  --login-art-halo-tone: color-mix(in srgb, var(--color-primary) 18%, var(--color-text-subtle));
  --login-art-halo: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--login-art-halo-tone) 22%, transparent) 0%, color-mix(in srgb, var(--login-art-halo-tone) 14%, transparent) 52%, color-mix(in srgb, var(--login-art-halo-tone) 5%, transparent) 78%, transparent 100%);
  --color-canvas: #ffffff;
  --color-surface-1: #f6f7f7;
  --color-surface-2: #f5f6f6;
  --color-surface-3: #f1f2f2;
  --color-surface-4: #eceeee;
  /* Nested work cards need a visible step, not adjacent near-identical grays. */
  --surface-card-group: var(--color-surface-3);
  --surface-card-item: var(--color-canvas);
  --surface-card-item-translucent: color-mix(in srgb, var(--surface-card-item) 40%, transparent);
  --surface-card-accent: var(--color-primary);
  --surface-control-hover: color-mix(in srgb, var(--color-primary) 10%, var(--surface-card-item));
  --color-border: #ebebeb;
  --color-border-strong: #d8dadd;
  --color-text: #000000;
  --color-text-muted: #34343a;
  --color-text-subtle: #62666d;
  /* Avatar rims invert with the theme through the shared neutral text color. */
  --avatar-border: color-mix(in srgb, var(--color-text-subtle) 45%, var(--color-border));
  --avatar-ink: var(--color-primary);
  --avatar-fill: var(--color-status-quoted-bg);

  /* --- สีสถานะและสีความหมาย: ทุกตัวเป็น "ตัวอักษร" ไม่ใช่แค่จุดสี -------------
     ทั้ง .status-* และ .metric-icon ตั้งทั้ง color และ background พร้อมกัน
     ค่าที่นี่จึงต้องผ่าน WCAG AA 4.5:1 เทียบกับ -bg ของตัวเอง (ไม่ใช่เทียบพื้นขาว
     ซึ่งง่ายกว่าและไม่ใช่ที่ที่มันถูกใช้จริง) CI step "Colour pairs meet WCAG AA"
     ใน job "UI invariants hold" บังคับข้อนี้อยู่

     กับดักที่เคยเจอมาแล้วครั้งหนึ่ง: อย่าปัดทศนิยมก่อนเทียบ ค่าเทาที่วัดได้
     4.497:1 ปัดเป็น "4.5" แล้วดูเหมือนผ่านทั้งที่ไม่ผ่าน จึงตั้งเป้าที่ 4.60
     เพื่อให้เหลือ margin ไม่ใช่เฉียดเส้น

     ปรับด้วยการลด lightness ใน HSL คง hue เดิม (เพี้ยนไม่เกิน 3 องศา)
     ค่าเดิมที่ตกเกณฑ์: success #1f8536(4.12) warning #a76514(4.15)
     danger #c85c55(3.59) info/assigned #5774bd(3.97) new #bd6533(3.72)
     closed #6d7772(4.04) — in-progress, quoted, cancelled ผ่านอยู่แล้ว ไม่แตะ */
  --color-success: #1d7c32;
  --color-success-bg: #e3f4ec;
  --color-warning: #9c5e13;
  --color-warning-bg: #fff0dc;
  --color-danger: #ba443c;
  --color-danger-bg: #fdecea;
  --color-info: #4968b8;
  --color-info-bg: #eaf0ff;

  --color-status-new: #a6592d;
  --color-status-new-bg: #fff0e7;
  --color-status-assigned: #4968b8;
  --color-status-assigned-bg: #eaf0ff;
  --color-status-in-progress: #50711a;
  --color-status-in-progress-bg: #effbd6;
  --color-status-quoted: #7656ac;
  --color-status-quoted-bg: #f2ebff;
  --color-status-closed: #646d69;
  --color-status-closed-bg: #edf0ee;
  --color-status-cancelled: #a3433d;
  --color-status-cancelled-bg: #fdecea;

  --color-priority-low: #7a9a8e;
  --color-priority-medium: #b9891f;
  --color-priority-high: #c66e3a;
  --color-priority-urgent: #c85c55;

  --focus-ring: 0 0 0 3px rgba(97, 61, 151, 0.28);

  /* เป้าหมาย 8px สำหรับ card และ panel ที่ redesign แล้ว ดู UI-CONTRACT.md
     DESIGN doc มี xl 16px และ xxl 24px ด้วย แต่ระบุใช้กับ "product screenshot
     panel" และ "oversized CTA banner (rare)" ซึ่งเป็นของหน้า marketing ทั้งคู่ —
     workspace นี้ไม่มีทั้งสองอย่าง จึงไม่ประกาศไว้ให้หยิบไปใช้ผิด
     lg 12px ยังอยู่เพราะ modal/FAB เดิมใช้จริง ให้ลดพร้อม ticket ของ surface นั้น */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  --color-shadow: rgba(20, 22, 30, 0.05);
  --shadow-card: 0 10px 35px var(--color-shadow);
  --shadow-panel: -30px 0 70px rgba(10, 12, 20, 0.14);

  /* --- Spacing: 4px base, from docs/web/design/DESIGN-linear.app.md ---------
     ตัวเลขล้วน ไม่ผูกภาษาหรือชนิดผลิตภัณฑ์ จึงเอามาตรง ๆ ได้
     ค่าที่อยู่นอกกริดนี้ (6, 10, 11, 14, 18, 22px ที่ CSS เดิมใช้) ไม่ต้องรักษาไว้ —
     UI ทุกหน้ากำลังจะถูกสร้างใหม่ ให้ปัดเข้าขั้นที่ใกล้ที่สุดเสมอ */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  /* Login composition derives its dimensions from the shared spacing scale. */
  --login-card-width: calc(var(--space-xxl) * 8);
  --login-art-width: calc(var(--space-xxl) * 10);
  --login-content-gap: calc(var(--space-xxl) * 2);
  --login-content-width: calc(var(--login-card-width) + var(--login-content-gap) + var(--login-art-width));
  --login-art-halo-size: 105%;
  --login-art-ratio: 4 / 3;
  /* Dashboard previews reserve their complete capacity even without data. */
  --dashboard-due-row-min: 144px;
  --dashboard-recent-row-min: 58px;
  --dashboard-recent-compact-row-min: 184px;
  --dashboard-recent-heading-min: 30px;
  /* จบที่ 48px — DESIGN doc มี 96px สำหรับระยะห่างระหว่าง section ของหน้า
     marketing ด้วยเหตุผลเดียวกับ typography ด้านล่าง (สเปกนั้นเป็นหน้าขาย
     ไม่ใช่ workspace ที่เปิดทั้งวัน) 96px จึงไม่ถูกประกาศไว้ */

  /* --- Typography ----------------------------------------------------------
     ยึดโครงลำดับชั้นของ DESIGN-linear.app.md แต่ "ไม่" ใช้ค่าของมัน เพราะสเปกนั้น
     เป็นของหน้า marketing (display-xl 80px, hero, pricing card) ส่วนนี่คือ
     operational workspace ที่คนเปิดทั้งวัน — ตารางแน่น drawer dialog

     พื้น 12px: ไทยมีสระบน/ล่างและวรรณยุกต์ซ้อนกันได้ 3 ชั้น เล็กกว่านี้แล้ว
     วรรณยุกต์เริ่มติดกัน (CSS เดิมมี 8px และ 9px รวม 6 จุด — ห้ามกลับมาอีก) */
  --text-xs: 12px;    /* caption, badge, meta ในตาราง — เล็กที่สุดที่ยอมรับ */
  --text-sm: 13px;    /* เซลล์ตารางแบบแน่น */
  --text-md: 14px;    /* body, input, ปุ่ม */
  --text-lg: 16px;    /* หัวการ์ด, หัวข้อย่อย */
  --text-xl: 20px;    /* หัวข้อ section */
  --text-2xl: 26px;   /* ชื่อหน้า */
  --text-3xl: 34px;   /* ตัวเลขใหญ่ใน metric card */

  /* ไทยต้องการช่องไฟบรรทัดมากกว่า Latin ที่ขนาดเท่ากัน — DESIGN doc ใช้ 1.40–1.50
     ซึ่งตึงเกินไปสำหรับสระบน/ล่าง */
  --leading-tight: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  /* DESIGN doc ใช้ letter-spacing ติดลบถึง -3px กับ display type
     ห้ามใช้กับข้อความไทยเด็ดขาด — สระกับพยัญชนะจะชนกัน ใช้ได้เฉพาะ Latin ล้วน */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;  /* eyebrow / label ตัวพิมพ์ใหญ่ */

  /* --- Z-index: ชั้นซ้อนทับ มีชื่อแทนเลขลอย ------------------------------
     ค่าเท่าเดิมทุกตัว เปลี่ยนแค่ให้เรียกชื่อได้ ลำดับสำคัญ: scrim ต้องอยู่เหนือ
     mobile-nav แต่ต่ำกว่า sidebar ไม่งั้นเปิด sidebar แล้ว nav ไม่ถูกหรี่
     (เลขลอยชุดนี้เคยทำให้ dialog ที่เปิดจาก drawer ไปอยู่หลัง drawer มาแล้ว) */
  --z-base: 1;
  --z-dropdown: 5;
  --z-topbar: 20;
  --z-mobile-nav: 24;
  --z-scrim: 25;
  --z-sidebar: 30;
  --z-drawer-backdrop: 60;
  --z-drawer: 61;
  --z-modal: 70;
  --z-login: 100;
  --z-toast: 120;

  /* --- Motion -------------------------------------------------------------
     DESIGN doc ไม่มีส่วนนี้เลย ตั้งเองให้ครบ CSS เดิมใช้ `transition: 0.2s` กระจาย */
  --duration-fast-default: 120ms;
  --duration-base-default: 200ms;
  --duration-fast: var(--duration-fast-default);
  --duration-base: var(--duration-base-default);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layered controls: material recipes, not another brand palette.
     Every stop derives from the product colors above in both themes.
     Reflection stays at the rim; no blurred halo around interactive icons. */
  --control-reflection: color-mix(in srgb, var(--color-on-primary) 38%, transparent);
  --control-sheen: color-mix(in srgb, var(--color-on-primary) 16%, transparent);
  --control-surface: linear-gradient(150deg,
    color-mix(in srgb, var(--color-surface-2) 86%, var(--color-on-primary)),
    var(--color-surface-2) 52%, var(--color-surface-4));
  --control-selected-surface: linear-gradient(150deg,
    color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-2)),
    color-mix(in srgb, var(--color-primary) 18%, var(--color-surface-2)));
  --control-primary-surface:
    radial-gradient(ellipse at 30% 12%, var(--control-sheen), transparent 58%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--color-primary) 94%, var(--color-on-primary)),
      var(--color-primary) 60%,
      color-mix(in srgb, var(--color-primary) 94%, var(--color-border-strong)));
  --control-primary-border: color-mix(in srgb, var(--color-primary) 64%, var(--color-on-primary));
  --control-inset: inset 0 1px 1px var(--control-reflection),
    inset 0 -2px 3px var(--color-shadow);
  --control-primary-inset: inset 0 1px 1px var(--control-reflection),
    inset 0 -3px 5px var(--color-shadow);
  /* Small informational tiles keep their semantic fill under a shared bevel. */
  --surface-soft-shading: linear-gradient(150deg,
    color-mix(in srgb, var(--color-on-primary) 6%, transparent), transparent 65%,
    color-mix(in srgb, var(--color-shadow) 35%, transparent));
  --surface-soft-inset: inset 0 1px 0 color-mix(in srgb, var(--color-on-primary) 16%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--color-shadow) 40%, transparent);
  --control-soft-surface: linear-gradient(150deg, var(--color-surface-2),
    color-mix(in srgb, var(--color-surface-4) 40%, var(--color-surface-2)));
  --surface-tile-shading: var(--surface-soft-shading);
  --surface-tile-inset: var(--control-inset);
  /* Only the floating tray is translucent; its controls remain opaque. */
  --dock-layered-surface: color-mix(in srgb, var(--color-surface-2) 40%, transparent);
  --dock-backdrop: blur(16px) saturate(110%);
  --dock-layered-shadow: inset 0 1px 0 var(--control-reflection), var(--shadow-card);

  --surface-panel-fill: color-mix(in srgb, var(--color-surface-1) 60%, transparent);
  /* Neutral material shading over panel surfaces; never used on data rows.
     Keep this separate from the fill so nested surface levels remain distinct. */
  --surface-panel-shading: linear-gradient(155deg,
    color-mix(in srgb, var(--color-on-primary) 48%, transparent),
    transparent 48%,
    color-mix(in srgb, var(--color-border-strong) 20%, transparent));
  --surface-header-shading: linear-gradient(180deg,
    color-mix(in srgb, var(--color-on-primary) 60%, transparent),
    color-mix(in srgb, var(--color-border-strong) 24%, transparent));

  /* Atlas compatibility aliases consume the existing product design system.
     No independent theme palette or type/spacing scale belongs to the prototype.
     Theme changes flow through --color-*; keep page-specific geometry in its CSS. */
  --atlas-canvas: var(--color-canvas);
  --atlas-canvas-deep: var(--color-surface-2);
  --atlas-surface: var(--color-surface-1);
  --atlas-surface-strong: var(--color-surface-2);
  --atlas-surface-solid: var(--color-surface-3);
  --atlas-dock: var(--color-surface-2);
  --atlas-dock-solid: var(--color-surface-2);
  --atlas-border: var(--color-border);
  --atlas-border-strong: var(--color-border-strong);
  --atlas-glass-highlight: var(--color-surface-4);
  --atlas-glass-tint: var(--color-surface-3);
  --atlas-glass-depth: var(--color-border);
  --atlas-circuit-line: var(--color-border-strong);
  --atlas-circuit-node: var(--color-primary);
  --atlas-signal: var(--color-primary);
  --atlas-signal-bright: var(--color-primary-hover);
  --atlas-action-start: var(--color-primary);
  --atlas-action-end: var(--color-primary);
  --atlas-on-action: var(--color-on-primary);
  --atlas-signal-soft: var(--color-status-quoted-bg);
  --atlas-signal-faint: var(--color-status-quoted-bg);
  --atlas-danger: var(--color-danger);
  --atlas-danger-soft: var(--color-danger-bg);
  --atlas-amber: var(--color-warning);
  --atlas-amber-soft: var(--color-warning-bg);
  --atlas-cyan: var(--color-info);
  --atlas-cyan-soft: var(--color-info-bg);
  --atlas-green: var(--color-success);
  --atlas-green-soft: var(--color-success-bg);
  --atlas-shadow-soft: var(--shadow-card);
  --atlas-shadow-float: var(--shadow-panel);
  --atlas-glow: var(--focus-ring);
  --atlas-radius-badge: var(--radius-sm);
  --atlas-radius-control: var(--radius-md);
  --atlas-radius-sm: var(--radius-sm);
  --atlas-radius-md: var(--radius-md);
  --atlas-radius-lg: var(--radius-md);
  --atlas-duration-press: var(--duration-fast);
  --atlas-duration-interaction: var(--duration-base);
  --atlas-duration-route: var(--duration-base);
  --atlas-duration-data: var(--duration-base);
  --atlas-ease-spring: var(--ease-standard);
  --atlas-field-base: var(--color-canvas);
  --atlas-field-glint: var(--color-on-primary);
  --atlas-field-signal: var(--color-primary);
  --atlas-material-rim: var(--color-border);
  --atlas-material-edge: var(--color-border);
  --atlas-material-fill: var(--color-surface-1);
  --atlas-material-light: var(--color-surface-4);
  --atlas-material-reflection: var(--color-surface-3);
  --atlas-material-depth: var(--color-shadow);
  --atlas-material-shadow: var(--color-shadow);
  --atlas-material-solid: var(--color-surface-2);
  --atlas-header-fill: var(--color-surface-1);
  --atlas-header-rim: var(--color-border);
  --atlas-header-edge: var(--color-border);
  --atlas-header-glint: var(--color-surface-4);
  --atlas-header-reflection: var(--color-surface-3);
  --atlas-header-shadow: var(--color-shadow);
  --atlas-header-control: var(--surface-card-item);
  --atlas-header-hover: var(--surface-control-hover);
  --atlas-header-menu: var(--color-surface-2);
  --atlas-header-ink: var(--color-text-muted);
  /* Decorative circuit opacity, derived from the shared foreground/brand. */
  --circuit-detail-opacity: 0.7;
  --atlas-field-line: color-mix(in srgb, var(--color-text-subtle) 28%, transparent);
  --atlas-field-etch: color-mix(in srgb, var(--color-text-subtle) 12%, transparent);
  --atlas-field-node: color-mix(in srgb, var(--color-primary) 38%, transparent);

  color-scheme: light dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --atlas-duration-press: 1ms;
    --atlas-duration-interaction: 1ms;
    --atlas-duration-route: 1ms;
    --atlas-duration-data: 1ms;
  }
}

/* Local QA preview flags are applied only by the localhost/demo guard.
   Reuse the same defaults rather than duplicating timings in preview CSS.
   Ordinary sessions continue to respect reduced motion. */
body[data-shell="flow-atlas"] [data-motion-preview="true"] {
  --duration-fast: var(--duration-fast-default);
  --duration-base: var(--duration-base-default);
  --atlas-duration-press: var(--duration-fast-default);
  --atlas-duration-interaction: var(--duration-base-default);
  --atlas-duration-route: var(--duration-base-default);
  --atlas-duration-data: var(--duration-base-default);
}

:root[data-theme="dark"] {
  --avatar-ink: var(--color-status-quoted);
  --circuit-detail-opacity: 1;
  /* Brand purple lightened for the dark canvas: the light-mode value's
     2.61:1 contrast against #010102 fails even AA-large, and a hover
     state has to get lighter here (dark UIs brighten on hover, mirroring
     how light mode darkens) rather than reuse the light value at all. */
  --color-primary: #7b52b8;
  --login-art-halo-tone: color-mix(in srgb, var(--color-primary-hover) 22%, var(--color-on-primary));
  --login-art-halo: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--login-art-halo-tone) 26%, transparent) 0%, color-mix(in srgb, var(--login-art-halo-tone) 18%, transparent) 50%, color-mix(in srgb, var(--login-art-halo-tone) 4%, transparent) 78%, transparent 100%);
  --color-primary-hover: #a78bd0;
  --color-primary-focus: #7b52b8;
  --color-on-primary: #ffffff;
  --color-canvas: #010102;
  --color-surface-1: #0f1011;
  --color-surface-2: #141516;
  --color-surface-3: #18191a;
  --color-surface-4: #191a1b;
  --surface-card-group: var(--color-surface-1);
  --surface-panel-shading: linear-gradient(155deg,
    color-mix(in srgb, var(--color-on-primary) 3%, transparent),
    transparent 48%,
    color-mix(in srgb, var(--color-canvas) 12%, transparent));
  --surface-header-shading: linear-gradient(180deg,
    color-mix(in srgb, var(--color-on-primary) 6%, transparent),
    color-mix(in srgb, var(--color-canvas) 18%, transparent));
  --surface-card-item: color-mix(in srgb, var(--color-surface-4) 92%, var(--color-text));
  --surface-card-accent: var(--color-primary-hover);
  --color-border: #23252a;
  --color-border-strong: #34343a;
  --color-text: #f7f8f8;
  --color-text-muted: #d0d6e0;
  --color-text-subtle: #8a8f98;

  --color-success: #3ecf6a;
  --color-success-bg: #123320;
  --color-warning: #e3a53d;
  --color-warning-bg: #3a2a12;
  --color-danger: #e0736c;
  --color-danger-bg: #3a1e1c;
  --color-info: #8fa4e8;
  --color-info-bg: #1b2440;

  --color-status-new: #e3a56c;
  --color-status-new-bg: #3a2a1c;
  --color-status-assigned: #8fa4e8;
  --color-status-assigned-bg: #1b2440;
  --color-status-in-progress: #a9d66b;
  --color-status-in-progress-bg: #1f2e14;
  --color-status-quoted: #b79ee6;
  --color-status-quoted-bg: #2a2140;
  --color-status-closed: #a7adb0;
  --color-status-closed-bg: #232526;
  --color-status-cancelled: #e0918c;
  --color-status-cancelled-bg: #3a1e1c;

  --color-priority-low: #8faea3;
  --color-priority-medium: #e3c161;
  --color-priority-high: #f0ab7e;
  --color-priority-urgent: #e0736c;

  --color-shadow: rgba(0, 0, 0, 0.32);
  --shadow-card: 0 10px 35px var(--color-shadow);
  --shadow-panel: -30px 0 70px rgba(0, 0, 0, 0.5);

}