/* ============================================================================
   Acloudear UX/UI Design Standard — Design Tokens (CSS)
   v1.2 · 2026-10-15 — the palette (light + dark) adopted from the confirmed
   Service-Triage full set (UXUI-Design/service-triage-full-set.html,
   15 Oct 2026), the family's first product-confirmed palette. Spacing, radii,
   elevation, type, motion and z-index are unchanged. Contrast re-verified:
   `python3 tokens/contrast_check.py` (all pairs, both themes) — the live
   evidence is Service-Triage's axe-core run (0 violations, both themes, both
   widths; Sprints/full-set-port/qa/ verdict 2026-10-15).
   Prior: Sprint 01 · v1.0 · 2026-10-02

   HOW TO USE
   1. Include this file before your app styles:  <link rel="stylesheet" href="tokens.css">
   2. Use var(--token) everywhere. Never hard-code a hex value in app code.
   3. Light theme is the default. Dark theme: set <html data-theme="dark">.
   4. All colours verified against WCAG 2.1 AA (see 05-COMPLIANCE-CHECKLIST.md).

   Naming: --color-*  --font-*  --space-*  --radius-*  --shadow-*  --z-*
           --dur-*  --ease-*  --size-*  --layout-*
   ============================================================================ */

/* ==== LIGHT THEME (canonical) ============================================ */
:root {
  /* --- Surfaces ------------------------------------------------------- */
  --color-bg:                    #F4F6F9;  /* page background            */
  --color-surface:               #FFFFFF;  /* cards, panels, tables      */
  --color-surface-subtle:        #F0F3F8;  /* table headers, zebra, wells*/
  --color-overlay:               rgba(10, 16, 28, 0.50); /* modal backdrop */

  /* --- Lines ---------------------------------------------------------- */
  --color-border:                #E2E7EF;  /* decorative dividers, cards */
  --color-border-strong:         #828A98;  /* interactive boundaries:
                                              inputs, secondary buttons    */

  /* --- Text ----------------------------------------------------------- */
  --color-text:                  #0F1A2B;  /* primary text               */
  --color-text-secondary:        #5B6677;  /* labels, captions           */
  --color-text-disabled:         #97A2B5;  /* disabled only (contrast-exempt) */

  /* --- Primary (links, selection, outlines) --------------------------- */
  --color-primary:               #2447D6;  /* links, active nav, selected */
  --color-primary-hover:         #1D39AC;
  --color-primary-active:        #17308B;
  --color-primary-subtle:        #E8EDFF;  /* selected rows, info tint   */
  --color-focus:                 #2447D6;  /* focus ring colour          */

  /* --- Action (solid buttons) ----------------------------------------- */
  --color-action-fill:           #2447D6;  /* white text on this (7.1:1) */
  --color-on-primary:            #FFFFFF;  /* the text/icon colour ON a primary fill */
  --color-on-danger:             #FFFFFF;  /* … and on a danger fill */
  --color-action-fill-hover:     #1D39AC;
  --color-action-fill-active:    #17308B;

  /* --- Brand (Acloudear) ---------------------------------------------- */
  --color-brand:                 #B92221;  /* logo red — marks & brand text */
  --color-brand-fill:            #DF030C;  /* web accent solid fill (white text) */
  --color-brand-subtle:          #FCECEC;  /* brand tint backgrounds     */

  /* --- Status: success ------------------------------------------------- */
  --color-success:               #0F7B5A;  /* dots, charts, icons        */
  --color-success-text:          #0F7B5A;  /* status text & badges       */
  --color-success-subtle:        #E3F5EE;

  /* --- Status: warning ------------------------------------------------- */
  --color-warning:               #A64C08;  /* solid fill — pair with WHITE text now
                                              (a dark amber replaced the bright one,
                                              #F59E0B, with the family palette)     */
  --color-warning-text:          #A64C08;  /* warning text & icons       */
  --color-warning-subtle:        #FFF0DC;

  /* --- Status: danger -------------------------------------------------- */
  --color-danger-fill:           #BE2F2F;  /* destructive buttons (white text, 5.8:1) */
  --color-danger-fill-hover:     #A32626;
  --color-danger-text:           #BE2F2F;  /* error text, icons, badges  */
  --color-danger-subtle:         #FDEAEA;

  /* --- Status: info (alias of primary) --------------------------------- */
  --color-info:                  #2447D6;
  --color-info-subtle:           #E8EDFF;

  /* --- Components ------------------------------------------------------ */
  --color-row-hover:             #F0F3F8;
  --color-row-selected:          #E8EDFF;
  --color-disabled-bg:           #F0F3F8;
  --color-disabled-text:         #97A2B5;

  /* --- Typography ------------------------------------------------------ */
  --font-family-base: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
                      Roboto, "PingFang SC", "Microsoft YaHei",
                      "Hiragino Sans GB", "Noto Sans SC", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono",
                      Consolas, "Courier New", monospace;

  --fs-display: 24px;  --lh-display: 32px;  --fw-display: 700; /* page title  */
  --fs-h2:      18px;  --lh-h2:      26px;  --fw-h2:      600; /* section     */
  --fs-h3:      16px;  --lh-h3:      24px;  --fw-h3:      600; /* card title  */
  --fs-body:    14px;  --lh-body:    21px;                     /* main text   */
  --fs-caption: 12px;  --lh-caption: 18px;                     /* captions    */
  --fs-label:   12px;  --lh-label:   16px;  --fw-label:   600; /* field label */
  --fs-button:  14px;  --lh-button:  20px;  --fw-button:  600; /* button text */
  --fs-mono:    13px;  --lh-mono:    20px;                     /* ids, JSON   */

  /* --- Spacing (4px grid) ---------------------------------------------- */
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* --- Shape ------------------------------------------------------------ */
  --radius-sm:   6px;    /* chips, inline marks                            */
  --radius-md:   10px;   /* buttons, inputs, cards — the base              */
  --radius-lg:   16px;   /* modals, large panels                           */
  --radius-pill: 999px;  /* badges, filter pills                           */

  /* --- Elevation --------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(17, 24, 39, 0.06);   /* cards, sticky headers */
  --shadow-2: 0 4px 12px rgba(17, 24, 39, 0.10);  /* dropdowns, popovers   */
  --shadow-3: 0 12px 32px rgba(17, 24, 39, 0.18); /* modals                */

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 120ms;  /* hover, press              */
  --dur-base: 200ms;  /* expand, tab switch        */
  --dur-slow: 320ms;  /* modal, drawer             */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* --- Sizes -------------------------------------------------------------- */
  --size-control-md: 36px;  /* default button / input height (desktop)     */
  --size-control-lg: 44px;  /* touch surfaces & single primary CTA         */
  --size-row:        36px;  /* compact table row height                    */
  --size-icon-sm: 16px;     /* inline, dense UI                            */
  --size-icon-md: 20px;     /* toolbars, buttons                           */
  --size-icon-lg: 24px;     /* empty states, headers                       */

  /* --- Layout ------------------------------------------------------------- */
  --layout-content-max:     1200px; /* max content width                     */
  --layout-page-pad:        24px;   /* desktop page padding                  */
  --layout-page-pad-mobile: 16px;   /* mobile page padding                   */
  --layout-chat-min:        360px;  /* console chat pane                     */
  --layout-chat-max:        520px;

  /* --- Breakpoints (reference — use in media queries) --------------------- */
  /* mobile: < 768px · tablet: 768–1023px · desktop: ≥ 1024px · wide: ≥ 1440px */

  /* --- Z-index scale ------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 10;      /* sticky table headers, section bars */
  --z-dropdown: 30;    /* menus, popovers, selects           */
  --z-overlay: 40;     /* modal backdrop                     */
  --z-modal: 50;
  --z-toast: 60;
  --z-tooltip: 70;
}

/* ==== DARK THEME (supported) ============================================= */
:root[data-theme="dark"] {
  --color-bg:                    #0E1218;
  --color-surface:               #161B24;
  --color-surface-subtle:        #1D2330;
  --color-overlay:               rgba(0, 0, 0, 0.55);

  --color-border:                rgba(255, 255, 255, 0.08);
  --color-border-strong:         #5A6B85;   /* interactive boundaries (3.2:1+) */

  --color-text:                  #E9EDF4;
  --color-text-secondary:        #97A2B5;
  --color-text-disabled:         #5B6677;

  --color-primary:               #7C9BFF;   /* link / text on dark (5.4:1)  */
  --color-primary-hover:         #96ADFF;
  --color-primary-active:        #B0C2FF;
  --color-primary-subtle:        rgba(79, 140, 255, 0.12);
  --color-focus:                 #7C9BFF;

  --color-action-fill:           #7C9BFF;   /* DARK text (7.1:1) + 7.1:1 vs bg  */
  --color-on-primary:            #0E1218;   /* text/icon colour on a primary fill */
  --color-on-danger:             #1A0E0E;   /* … and on a danger fill           */
  --color-action-fill-hover:     #96ADFF;
  --color-action-fill-active:    #96ADFF;

  --color-brand:                 #FF6E6A;   /* brand red for dark surfaces  */
  --color-brand-fill:            #DF030C;   /* solid fill keeps white text  */
  --color-brand-subtle:          rgba(255, 110, 106, 0.12);

  --color-success:               #4CD3A1;
  --color-success-text:          #4CD3A1;
  --color-success-subtle:        rgba(43, 213, 118, 0.12);

  --color-warning:               #F5A44B;   /* pair with dark text (9.1:1)  */
  --color-warning-text:          #F5A44B;
  --color-warning-subtle:        rgba(255, 204, 102, 0.12);

  --color-danger-fill:           #FF8A8A;   /* dark text (7.6:1)            */
  --color-danger-fill-hover:     #FFA6A6;
  --color-danger-text:           #FF8A8A;
  --color-danger-subtle:         rgba(255, 93, 93, 0.12);

  --color-info:                  #7C9BFF;
  --color-info-subtle:           rgba(79, 140, 255, 0.12);

  --color-row-hover:             rgba(255, 255, 255, 0.04);
  --color-row-selected:          rgba(79, 140, 255, 0.12);
  --color-disabled-bg:           rgba(255, 255, 255, 0.06);
  --color-disabled-text:         #5B6677;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.60);
}

/* ==== MOTION SAFETY ======================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}