/* 班務助手 AI — 後台系統（Admin Console）Design Tokens
   Single source of truth for the admin console. Brand-aligned with the public
   marketing site (tokens.css): deep-green sidebar, green primary action, warm-white
   work area, gold used sparingly for highlights — high-density layout stays admin-only.
   Both layers may coexist: load tokens.css for the public site,
   tokens-admin.css for /admin. Never hard-code a hex in component CSS.
   Contrast: text tokens meet WCAG AA on their documented surfaces
   (>=4.5:1 below 24px, >=3:1 at 24px+). Disabled controls are exempt. */

:root {
  color-scheme: light;

  /* ---------- Surfaces ---------- */
  --a-surface-app:        #EDEAE1; /* app canvas behind panels — warm neutral */
  --a-surface-page:       #F7F5EE; /* work area background — warm white */
  --a-surface-raised:     #FFFFFF; /* rows, cards, panels */
  --a-surface-sunken:     #F1EEE3; /* notes, read-only blocks */
  --a-surface-muted:      #EAE6D9; /* filter chips, table headers */
  --a-surface-nav:        #173D36; /* left navigation — deep green */
  --a-surface-nav-hover:  #1F4A42; /* nav item hover — between nav bg and active */
  --a-surface-nav-active: #2F6B5C; /* mid green — active item, distinct lift off nav bg */
  --a-surface-nav-border: #0F2B26;
  --a-surface-overlay-scrim: rgba(23, 61, 54, .42);
  --a-avatar-bg: #4A5450; /* default avatar placeholder — neutral, not brand green */

  /* ---------- Text ---------- */
  --a-text-primary:    #23292B;
  --a-text-secondary:  #5B6360; /* meta, labels, helper text */
  --a-text-strong-alt: #33424A; /* secondary button label */
  --a-text-inverse:    #FFFFFF;
  --a-text-nav:        #D7E4DF;
  --a-text-nav-label:  #8FAFA5; /* nav group headings */
  --a-text-nav-brand:  #8FAFA5;
  --a-text-disabled:   #9CA39A;
  --a-text-link:       #1F5D53;
  --a-text-link-hover: #164A42;

  /* ---------- Action ---------- */
  --a-action-primary:        #1F5D53;
  --a-action-primary-hover:  #164A42;
  --a-action-primary-active:  #103A34;
  --a-action-primary-fg:     #FFFFFF;
  --a-action-secondary-fg:     #33424A;
  --a-action-secondary-border: #C7BFA9;
  --a-action-secondary-hover-bg: #EAE6D9;
  --a-action-danger:        #93332A;
  --a-action-danger-hover:  #7C2A22;
  --a-action-disabled-bg:   #DDD8C8;
  --a-action-disabled-fg:   #9CA39A;
  --a-focus-ring:           #1F5D53;

  /* ---------- Status (see §4 for the icon + text pairing) ----------
     Semantic grouping is deliberate and matches the public site: green = AI
     handled / human-assigned / resolved (i.e. "normal or done"), neutral =
     in-progress (someone is actively on it — not a problem state) or
     not-yet-enabled, amber = waiting on someone / stale / temporarily
     unavailable / degraded, red = high risk / needs help. "真人處理中"
     (in-progress) and "外部系統不可用" (unavailable) used to share the same
     neutral gray — that conflated "actively being handled, nothing's wrong"
     with "a system is down"; unavailable now lives in the amber group with
     waiting/pending/stale instead, see demo/README.md decision AC. Not every
     status is a different hue — that's intentional, not an oversight; see
     CLAUDE.md / this round's instructions for why. */
  --a-status-ai-fg:          #1F5D53; --a-status-ai-bg:          #EAF3EF; --a-status-ai-border:          #CFE3DA;
  --a-status-waiting-fg:     #8A6015; --a-status-waiting-bg:     #FBF1DE; --a-status-waiting-border:     #EFDDB0;
  --a-status-assigned-fg:    #1F5D53; --a-status-assigned-bg:    #EAF3EF; --a-status-assigned-border:    #CFE3DA;
  --a-status-inprogress-fg:  #4A5450; --a-status-inprogress-bg:  #EEEBE3; --a-status-inprogress-border:  #DAD5C8;
  --a-status-pending-fg:     #8A6015; --a-status-pending-bg:     #FBF1DE; --a-status-pending-border:     #EFDDB0;
  --a-status-resolved-fg:    #1F5D53; --a-status-resolved-bg:    #EAF3EF; --a-status-resolved-border:    #CFE3DA;
  --a-status-needshelp-fg:   #8F2F26; --a-status-needshelp-bg:   #F8E9E6; --a-status-needshelp-border:   #EDD2CC;
  --a-status-risk-fg:        #8F2F26; --a-status-risk-bg:        #F8E9E6; --a-status-risk-border:        #EDD2CC;
  --a-status-stale-fg:       #8A6015; --a-status-stale-bg:       #FBF1DE; --a-status-stale-border:       #EFDDB0;
  --a-status-unavailable-fg: #8A6015; --a-status-unavailable-bg: #FBF1DE; --a-status-unavailable-border: #EFDDB0;
  /* Priority / SLA accent used as the 3px left bar on a case row */
  --a-accent-risk:    #A63A2F;
  --a-accent-warning: #C08A2E;
  --a-accent-normal:  #2E7D5B;
  --a-accent-done:    #1F5D53;
  /* Health dots (external systems) */
  --a-health-ok:    #1F5D53;
  --a-health-degraded: #C08A2E;
  --a-health-down:  #A63A2F;
  /* Channel distribution bar — 5 official channels only, distinct swatches
     within the brand family (paired with a text legend, never color alone) */
  --a-channel-parent-oa: #3F8F7C;
  --a-channel-widget:    #7FA89C;
  --a-channel-liff:      #9C9587;

  /* ---------- Border ---------- */
  --a-border-default: #E2DCCC; /* row, panel, table dividers */
  --a-border-frame:   #D8D1BE; /* outer frame, section separators */
  --a-border-strong:  #C7BFA9; /* form controls, secondary buttons */
  --a-border-field-focus: #1F5D53;
  --a-border-width-hairline: 1px;
  --a-border-width-control:  1.5px;
  --a-border-width-accent:   3px; /* case-row priority bar */
  --a-border-width-tab:      2px; /* active tab underline */

  /* ---------- Typography ---------- */
  --a-font-sans: "Noto Sans TC", "Inter", system-ui, -apple-system,
                 "PingFang TC", "Microsoft JhengHei", sans-serif;
  --a-font-mono-label: "Inter", "Noto Sans TC", sans-serif; /* ids, codes, numerals */

  --a-weight-regular: 400;
  --a-weight-medium:  500;
  --a-weight-semibold: 600; /* Inter labels only */
  --a-weight-bold:    700;

  --a-font-size-page-title:   20px; --a-line-height-page-title: 1.40;
  --a-font-size-panel-title:  15px; --a-line-height-panel-title: 1.55;
  --a-font-size-row-title:    15px; /* case subject */
  --a-font-size-body:         14px; --a-line-height-body: 1.80;
  --a-font-size-body-sm:      13.5px;
  --a-font-size-meta:         13px;
  --a-font-size-caption:      12.5px; --a-line-height-caption: 1.70;
  --a-font-size-chip:         12px;
  --a-font-size-micro:        11.5px; /* SLA countdown under a chip */
  --a-font-size-eyebrow:      10.5px; --a-letter-spacing-eyebrow: .12em;
  --a-font-size-frame-label:  11px;   --a-letter-spacing-frame: .14em;
  --a-measure-read: 46ch;  /* message bubbles, wiki body */

  /* ---------- Spacing (8-point, 4px half-step) ---------- */
  --a-space-1: 4px;  --a-space-2: 8px;  --a-space-3: 12px;
  --a-space-4: 16px; --a-space-5: 20px; --a-space-6: 24px;
  --a-space-8: 32px; --a-space-10: 40px;
  --a-pad-work-area: var(--a-space-6);   /* 24px, desktop */
  --a-pad-work-area-tablet: var(--a-space-5);
  --a-pad-row: 14px 16px;                /* case row, medium density */
  --a-pad-panel: var(--a-space-6);
  --a-gap-row: var(--a-space-2);          /* between case rows */
  --a-gap-section: var(--a-space-6);

  /* ---------- Layout ---------- */
  --a-nav-width: 212px;
  --a-nav-width-collapsed: 64px;
  --a-topbar-height: 56px;
  --a-case-list-width: 320px;   /* detail layout A, left column */
  --a-case-aside-width: 320px;  /* detail layout A, right column */
  --a-case-row-grid: 150px 1fr 150px 128px 96px; /* status | subject | owner | updated | SLA */
  --a-min-hit: 44px;    /* desktop */
  --a-min-hit-touch: 48px; /* tablet, teachers using it in class */

  /* ---------- Radius (two only) ---------- */
  --a-radius-surface: 4px; /* panels, rows, cards */
  --a-radius-control: 3px; /* buttons, inputs, chips, tabs */
  --a-radius-round: 999px; /* avatar, health dot */

  /* ---------- Shadow (overlays only) ---------- */
  --a-shadow-none: none;
  --a-shadow-dropdown: 0 6px 18px rgba(23, 61, 54, .12);
  --a-shadow-dialog:   0 16px 40px rgba(23, 61, 54, .20);
  --a-shadow-sticky-bar: 0 -4px 12px rgba(23, 61, 54, .08); /* tablet action bar */

  /* ---------- Breakpoints ---------- */
  --a-bp-tablet-min: 768px;
  --a-bp-tablet-max: 1279px;
  --a-bp-desktop-min: 1280px;
  /* Design canvases: 1440 desktop, 1024 tablet. No phone layout in scope. */

  /* ---------- Motion ---------- */
  --a-duration-instant: 80ms;  /* chip / tab fill */
  --a-duration-fast:    140ms; /* hover, focus */
  --a-duration-base:    200ms; /* panel + accordion open */
  --a-duration-dialog:  220ms;
  --a-easing-standard: cubic-bezier(.2, 0, .2, 1);

  /* ---------- Z-index ---------- */
  --a-z-base: 0;
  --a-z-sticky-tablebar: 50;
  --a-z-topbar: 100;
  --a-z-nav: 110;
  --a-z-dropdown: 300;
  --a-z-dialog-scrim: 600;
  --a-z-dialog: 610;
  --a-z-toast: 700;
}

/* Dark-mode override disabled for demo/: the approved console mockup（後台系統 Mockup.dc.html）
   was only ever drawn/reviewed in this light form — no dark frame exists — so the
   console must render identically regardless of the visitor's OS color-scheme setting until a
   dark variant goes through its own design review. Same treatment as the public site's
   tokens.css. Values kept here, commented out, so that review can start from these rather than
   from scratch. Updated to the green brand direction for consistency with the light values above.
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --a-surface-app:    #12181A;
    --a-surface-page:   #171F1D;
    --a-surface-raised: #1F2926;
    --a-surface-sunken: #1B2422;
    --a-surface-muted:  #232E2A;
    --a-surface-nav:    #0F2B26;
    --a-surface-nav-active: #2F6B5C;
    --a-surface-nav-border: #1A3A33;

    --a-text-primary:   #EEF2EF;
    --a-text-secondary: #A7B3AC;
    --a-text-strong-alt:#CBD4D0;
    --a-text-disabled:  #6C786F;
    --a-text-link:      #5FB394;
    --a-text-link-hover:#7AC4A8;

    --a-action-primary:       #3E9184;
    --a-action-primary-hover: #4FA396;
    --a-action-primary-active:#357F73;
    --a-action-primary-fg:    #0C1013;
    --a-action-secondary-fg:     #CBD4D0;
    --a-action-secondary-border: #3A4440;
    --a-action-secondary-hover-bg:#232E2A;
    --a-action-danger:        #D2685B;
    --a-action-disabled-bg:   #2E3632;
    --a-action-disabled-fg:   #6C786F;
    --a-focus-ring:           #5FB394;

    --a-status-ai-fg:#5FB394;         --a-status-ai-bg:#16291F;         --a-status-ai-border:#26452F;
    --a-status-waiting-fg:#DFA84E;    --a-status-waiting-bg:#2B2417;    --a-status-waiting-border:#4A3D21;
    --a-status-assigned-fg:#5FB394;   --a-status-assigned-bg:#16291F;   --a-status-assigned-border:#26452F;
    --a-status-inprogress-fg:#CBD4D0; --a-status-inprogress-bg:#232E2A; --a-status-inprogress-border:#3A4440;
    --a-status-pending-fg:#DFA84E;    --a-status-pending-bg:#2B2417;    --a-status-pending-border:#4A3D21;
    --a-status-resolved-fg:#5FB394;   --a-status-resolved-bg:#16291F;   --a-status-resolved-border:#26452F;
    --a-status-needshelp-fg:#E08A7D;  --a-status-needshelp-bg:#2C1C19;  --a-status-needshelp-border:#4A2C27;
    --a-status-risk-fg:#E08A7D;       --a-status-risk-bg:#2C1C19;       --a-status-risk-border:#4A2C27;
    --a-status-stale-fg:#DFA84E;      --a-status-stale-bg:#2B2417;      --a-status-stale-border:#4A3D21;
    --a-status-unavailable-fg:#DFA84E;--a-status-unavailable-bg:#2B2417;--a-status-unavailable-border:#4A3D21;

    --a-border-default: #2E3632;
    --a-border-frame:   #232E2A;
    --a-border-strong:  #3A4440;
  }
}
*/

@media (prefers-reduced-motion: reduce) {
  :root {
    --a-duration-instant: 0ms;
    --a-duration-fast:    0ms;
    --a-duration-base:    0ms;
    --a-duration-dialog:  0ms;
  }
}