/* ============================================================
   TypeUI Professional — Design Tokens
   Source of truth: docs/design-skills/professional/*.md
   Served at /assets/css/typeui-tokens.css (mounted in server.js)

   Pages must load "Open Sans" + "Noto Sans Thai" themselves:
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap" rel="stylesheet">
   (Open Sans has no Thai glyphs; Noto Sans Thai is the Thai
   fallback — the one sanctioned deviation from typography.md.)

   Dark mode resolves automatically via prefers-color-scheme.
   Never swap colors manually (SKILL.md critical rule).
   ============================================================ */

:root {
  /* ---- Backgrounds: neutral (colors.md) ---- */
  --tui-bg-primary-soft:      #FFFFFF;
  --tui-bg-primary:           #FFFFFF;
  --tui-bg-primary-medium:    #FFFFFF;
  --tui-bg-primary-strong:    #FFFFFF;
  --tui-bg-secondary-soft:    #F7F8F8;
  --tui-bg-secondary:         #F7F8F8;
  --tui-bg-secondary-medium:  #F0F2F2;
  --tui-bg-secondary-strong:  #E9ECEC;
  --tui-bg-tertiary-soft:     #EAEDED;
  --tui-bg-tertiary:          #EAEDED;
  --tui-bg-tertiary-medium:   #E3E6E6;
  --tui-bg-quaternary:        #D5D9D9;
  --tui-bg-quaternary-medium: #D5D9D9;
  --tui-bg-gray:              #BBBFBF;

  /* ---- Backgrounds: brand ---- */
  --tui-brand-softer: #FEF7ED;
  --tui-brand-soft:   #FCECD3;
  --tui-brand:        #F3A848;
  --tui-brand-medium: #F8D4A0;
  --tui-brand-strong: #D4882A;

  /* ---- Backgrounds: status ---- */
  --tui-success-soft:   #F0FCF5;
  --tui-success:        #007A55;
  --tui-success-medium: #D0FAE5;
  --tui-success-strong: #006045;
  --tui-danger-soft:    #FEF0F0;
  --tui-danger:         #CC0C39;
  --tui-danger-medium:  #FFE0E3;
  --tui-danger-strong:  #A30028;
  --tui-warning-soft:   #FFF7ED;
  --tui-warning:        #F97316;
  --tui-warning-medium: #FFEDD5;
  --tui-warning-strong: #C2410C;

  /* ---- Backgrounds: utility ---- */
  --tui-dark:        #131A22;
  --tui-dark-strong: #0F1111;
  --tui-disabled:    #EAEDED;

  /* ---- Accents (same value both modes) ---- */
  --tui-accent-purple:  #A855F7;
  --tui-accent-sky:     #0EA5E9;
  --tui-accent-teal:    #007185;
  --tui-accent-pink:    #DB2777;
  --tui-accent-cyan:    #06B6D4;
  --tui-accent-fuchsia: #C026D3;
  --tui-accent-indigo:  #4F46E5;
  --tui-accent-orange:  #F3A848;

  /* ---- Text ---- */
  --tui-fg-white:       #FFFFFF;
  --tui-fg-black:       #0F1111;
  --tui-fg-heading:     #0F1111;
  --tui-fg-body:        #565959;
  --tui-fg-body-subtle: #767676;

  --tui-fg-brand-subtle: #F8D4A0;
  --tui-fg-brand:        #D4882A;
  --tui-fg-brand-strong: #B87320;

  --tui-fg-success:        #047857;
  --tui-fg-success-strong: #065F46;
  --tui-fg-danger:         #CC0C39;
  --tui-fg-danger-strong:  #8B0836;
  --tui-fg-warning-subtle: #EA580C;
  --tui-fg-warning:        #7C2D12;
  --tui-fg-disabled:       #949494;

  --tui-fg-yellow:        #FACC15;
  --tui-fg-info:          #232F3E;
  --tui-fg-purple:        #9333EA;
  --tui-fg-purple-strong: #7E3AF2;
  --tui-fg-cyan:          #007185;
  --tui-fg-indigo:        #4F46E5;
  --tui-fg-pink:          #DB2777;
  --tui-fg-lime:          #65A30D;

  /* ---- Borders ---- */
  --tui-border-dark:            #131A22;
  --tui-border-buffer:          #FFFFFF;
  --tui-border-buffer-medium:   #FFFFFF;
  --tui-border-buffer-strong:   #FFFFFF;
  --tui-border-muted:           #F7F8F8;
  --tui-border-light-subtle:    #EAEDED;
  --tui-border-light:           #EAEDED;
  --tui-border-light-medium:    #EAEDED;
  --tui-border-default-subtle:  #D5D9D9;
  --tui-border-default:         #D5D9D9;
  --tui-border-default-medium:  #D5D9D9;
  --tui-border-default-strong:  #BBBFBF;
  --tui-border-success-subtle:  #A7F3D0;
  --tui-border-success:         #047857;
  --tui-border-danger-subtle:   #FECDD3;
  --tui-border-danger:          #CC0C39;
  --tui-border-warning-subtle:  #FED7AA;
  --tui-border-warning:         #EA580C;
  --tui-border-brand-subtle:    #F8D4A0;
  --tui-border-brand-light:     #F3A848;
  --tui-border-brand:           #D4882A;
  --tui-border-dark-subtle:     #131A22;
  --tui-border-purple:          #A855F7;
  --tui-border-orange:          #F3A848;

  /* ---- Button glint (colors.md) ---- */
  --tui-glint-light: rgba(255, 255, 255, 0.20);
  --tui-glint-dark:  rgba(0, 0, 0, 0.08);

  /* ---- Charts (bar / donut / line series) ----
     Fixed categorical order, assigned to entities in this order and
     never cycled or repainted on filter (dataviz rule). The reference
     product leads every chart with the brand orange + teal pair
     (bars, lines, sparklines), so slots 1-2 mirror it exactly; the
     remaining slots come from the TypeUI accent set. CVD separation
     and dark-surface contrast validated in both modes (worst adjacent
     pair ΔE 20+). Orange/teal sit outside the generic validator's
     lightness/chroma bands — accepted as a brand decision, which is
     why every chart must carry a legend or direct labels (also the
     relief for orange/sky on light surfaces). */
  --tui-chart-1: #F3A848; /* brand orange */
  --tui-chart-2: #007185; /* teal         */
  --tui-chart-3: #A855F7; /* purple       */
  --tui-chart-4: #0EA5E9; /* sky          */
  --tui-chart-5: #DB2777; /* pink         */
  --tui-chart-6: #4F46E5; /* indigo       */
  /* Single-series marks use --tui-chart-1. Status colors (success/
     warning/danger) are reserved for state and never used as series. */

  /* ---- Semantic surfaces ----
     Raised surfaces (cards, panels) sit one neutral step above the
     page. In light mode both steps are white so nothing changes; in
     dark mode this is the elevation ramp the reference product uses
     (#0F1111 page -> #191E1E card -> #2D3333 border), which keeps
     dark screens from collapsing into one flat black slab. Indirect
     var() references resolve per mode automatically. */
  /* Alert surfaces: solid soft tints in light; dark mode swaps to
     translucent tints over the page so large alert boxes stop reading
     as heavy color slabs (user feedback on dark readability). */
  --tui-alert-success-bg: var(--tui-success-soft);
  --tui-alert-danger-bg:  var(--tui-danger-soft);
  --tui-alert-warning-bg: var(--tui-warning-soft);
  --tui-alert-brand-bg:   var(--tui-brand-softer);

  --tui-surface-card:        var(--tui-bg-primary-medium);
  --tui-surface-card-border: var(--tui-border-default-medium);
  --tui-surface-card-hover:  var(--tui-bg-secondary-medium);

  /* ---- Radius (radius.md) ---- */
  --tui-radius-base: 8px;
  --tui-radius:      4px;
  --tui-radius-sm:   2px;
  --tui-radius-full: 9999px;

  /* ---- Shadows (shadows.md) ---- */
  --tui-shadow-2xs: 0 1px rgb(0 0 0 / 0.04);
  --tui-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.04);
  --tui-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --tui-shadow-md:  0 2px 4px -1px rgb(0 0 0 / 0.06), 0 1px 3px -1px rgb(0 0 0 / 0.06);
  --tui-shadow-lg:  0 6px 12px -3px rgb(0 0 0 / 0.08), 0 3px 5px -3px rgb(0 0 0 / 0.06);
  --tui-shadow-xl:  0 14px 20px -5px rgb(0 0 0 / 0.08), 0 6px 8px -5px rgb(0 0 0 / 0.06);
  --tui-shadow-2xl: 0 20px 40px -10px rgb(0 0 0 / 0.15);

  /* ---- Typography ---- */
  --tui-font: "Open Sans", "Noto Sans Thai", sans-serif;

  /* ---- Z-index scale (semantic; never arbitrary values) ---- */
  --tui-z-dropdown:       10;
  --tui-z-sticky:         20;
  --tui-z-modal-backdrop: 40; /* modals.md */
  --tui-z-modal:          50;
  --tui-z-toast:          60;
  --tui-z-tooltip:        70;

  /* ---- Motion (product register: 150–250ms, state not decoration) ---- */
  --tui-ease:     cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
  --tui-duration: 180ms;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tui-bg-primary-soft:      #0F1111;
    --tui-bg-primary:           #000000;
    --tui-bg-primary-medium:    #191E1E;
    --tui-bg-primary-strong:    #2D3333;
    --tui-bg-secondary-soft:    #0F1111;
    --tui-bg-secondary:         #000000;
    --tui-bg-secondary-medium:  #191E1E;
    --tui-bg-secondary-strong:  #2D3333;
    --tui-bg-tertiary-soft:     #0F1111;
    --tui-bg-tertiary:          #191E1E;
    --tui-bg-tertiary-medium:   #2D3333;
    --tui-bg-quaternary:        #2D3333;
    --tui-bg-quaternary-medium: #3D4444;
    --tui-bg-gray:              #3D4444;

    --tui-brand-softer: #3D2A0F;
    --tui-brand-soft:   #5C3F18;
    --tui-brand-medium: #5C3F18;
    --tui-brand-strong: #F3A848;

    --tui-success-soft:   #002C22;
    --tui-success:        #009966;
    --tui-success-medium: #004F3B;
    --tui-success-strong: #007A55;
    --tui-danger-soft:    #4D0218;
    --tui-danger-medium:  #8B0836;
    --tui-warning-soft:   #7C2D12;
    --tui-warning-medium: #7C2D12;

    --tui-dark-strong: #2D3333;
    --tui-disabled:    #191E1E;

    --tui-fg-heading:     #FFFFFF;
    --tui-fg-body:        #A4A9A9;
    --tui-fg-body-subtle: #A4A9A9;

    --tui-fg-brand-subtle: #5C3F18;
    --tui-fg-brand:        #F3A848;
    --tui-fg-brand-strong: #F8D4A0;

    --tui-fg-success:        #065F46;
    --tui-fg-success-strong: #10B981;
    --tui-fg-danger:         #F43F5E;
    --tui-fg-danger-strong:  #F87171;
    --tui-fg-warning-subtle: #F97316;
    --tui-fg-warning:        #FBBF24;
    --tui-fg-disabled:       #565959;

    --tui-fg-info:          #93C5FD;
    --tui-fg-purple:        #A855F7;
    --tui-fg-purple-strong: #DDD6FE;
    --tui-fg-cyan:          #06B6D4;
    --tui-fg-lime:          #84CC16;

    --tui-border-dark:            #3D4444;
    --tui-border-buffer:          #000000;
    --tui-border-buffer-medium:   #191E1E;
    --tui-border-buffer-strong:   #2D3333;
    --tui-border-muted:           #0F1111;
    --tui-border-light-subtle:    #0F1111;
    --tui-border-light:           #191E1E;
    --tui-border-light-medium:    #2D3333;
    --tui-border-default-subtle:  #0F1111;
    --tui-border-default:         #191E1E;
    --tui-border-default-medium:  #2D3333;
    --tui-border-default-strong:  #3D4444;
    --tui-border-success-subtle:  #064E3B;
    --tui-border-success:         #065F46;
    --tui-border-danger-subtle:   #8B0836;
    --tui-border-warning-subtle:  #7C2D12;
    --tui-border-warning:         #F97316;
    --tui-border-brand-subtle:    #5C3F18;
    --tui-border-brand:           #F3A848;
    --tui-border-dark-subtle:     #2D3333;

    --tui-alert-success-bg: rgba(16,185,129,.10);
    --tui-alert-danger-bg:  rgba(244,63,94,.10);
    --tui-alert-warning-bg: rgba(249,115,22,.10);
    --tui-alert-brand-bg:   rgba(243,168,72,.10);
    --tui-surface-card-hover: #2D3333;
    --tui-glint-light: rgba(255, 255, 255, 0.10);
    --tui-glint-dark:  rgba(0, 0, 0, 0.20);

    /* Charts: same entity order; only sky drops one step darker on
       dark surfaces (validated). Orange/teal stay identical to the
       reference product's dark dashboards. */
    --tui-chart-4: #0284C7;

    /* Shadows read heavier on dark surfaces */
    --tui-shadow-2xs: 0 1px rgb(0 0 0 / 0.20);
    --tui-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.24);
    --tui-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.30), 0 1px 2px -1px rgb(0 0 0 / 0.30);
    --tui-shadow-md:  0 2px 4px -1px rgb(0 0 0 / 0.30), 0 1px 3px -1px rgb(0 0 0 / 0.30);
    --tui-shadow-lg:  0 6px 12px -3px rgb(0 0 0 / 0.36), 0 3px 5px -3px rgb(0 0 0 / 0.30);
    --tui-shadow-xl:  0 14px 20px -5px rgb(0 0 0 / 0.36), 0 6px 8px -5px rgb(0 0 0 / 0.30);
    --tui-shadow-2xl: 0 20px 40px -10px rgb(0 0 0 / 0.50);
  }
}

/* Explicit theme override for pages with a user-facing theme toggle
   (e.g. staff pages persist a choice in localStorage and set
   data-theme on <html>). Generated as an exact copy of the
   prefers-color-scheme block above -- keep them in sync by
   regenerating, not hand-editing. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
    --tui-bg-primary-soft:      #0F1111;
    --tui-bg-primary:           #000000;
    --tui-bg-primary-medium:    #191E1E;
    --tui-bg-primary-strong:    #2D3333;
    --tui-bg-secondary-soft:    #0F1111;
    --tui-bg-secondary:         #000000;
    --tui-bg-secondary-medium:  #191E1E;
    --tui-bg-secondary-strong:  #2D3333;
    --tui-bg-tertiary-soft:     #0F1111;
    --tui-bg-tertiary:          #191E1E;
    --tui-bg-tertiary-medium:   #2D3333;
    --tui-bg-quaternary:        #2D3333;
    --tui-bg-quaternary-medium: #3D4444;
    --tui-bg-gray:              #3D4444;

    --tui-brand-softer: #3D2A0F;
    --tui-brand-soft:   #5C3F18;
    --tui-brand-medium: #5C3F18;
    --tui-brand-strong: #F3A848;

    --tui-success-soft:   #002C22;
    --tui-success:        #009966;
    --tui-success-medium: #004F3B;
    --tui-success-strong: #007A55;
    --tui-danger-soft:    #4D0218;
    --tui-danger-medium:  #8B0836;
    --tui-warning-soft:   #7C2D12;
    --tui-warning-medium: #7C2D12;

    --tui-dark-strong: #2D3333;
    --tui-disabled:    #191E1E;

    --tui-fg-heading:     #FFFFFF;
    --tui-fg-body:        #A4A9A9;
    --tui-fg-body-subtle: #A4A9A9;

    --tui-fg-brand-subtle: #5C3F18;
    --tui-fg-brand:        #F3A848;
    --tui-fg-brand-strong: #F8D4A0;

    --tui-fg-success:        #065F46;
    --tui-fg-success-strong: #10B981;
    --tui-fg-danger:         #F43F5E;
    --tui-fg-danger-strong:  #F87171;
    --tui-fg-warning-subtle: #F97316;
    --tui-fg-warning:        #FBBF24;
    --tui-fg-disabled:       #565959;

    --tui-fg-info:          #93C5FD;
    --tui-fg-purple:        #A855F7;
    --tui-fg-purple-strong: #DDD6FE;
    --tui-fg-cyan:          #06B6D4;
    --tui-fg-lime:          #84CC16;

    --tui-border-dark:            #3D4444;
    --tui-border-buffer:          #000000;
    --tui-border-buffer-medium:   #191E1E;
    --tui-border-buffer-strong:   #2D3333;
    --tui-border-muted:           #0F1111;
    --tui-border-light-subtle:    #0F1111;
    --tui-border-light:           #191E1E;
    --tui-border-light-medium:    #2D3333;
    --tui-border-default-subtle:  #0F1111;
    --tui-border-default:         #191E1E;
    --tui-border-default-medium:  #2D3333;
    --tui-border-default-strong:  #3D4444;
    --tui-border-success-subtle:  #064E3B;
    --tui-border-success:         #065F46;
    --tui-border-danger-subtle:   #8B0836;
    --tui-border-warning-subtle:  #7C2D12;
    --tui-border-warning:         #F97316;
    --tui-border-brand-subtle:    #5C3F18;
    --tui-border-brand:           #F3A848;
    --tui-border-dark-subtle:     #2D3333;

    --tui-alert-success-bg: rgba(16,185,129,.10);
    --tui-alert-danger-bg:  rgba(244,63,94,.10);
    --tui-alert-warning-bg: rgba(249,115,22,.10);
    --tui-alert-brand-bg:   rgba(243,168,72,.10);
    --tui-surface-card-hover: #2D3333;
    --tui-glint-light: rgba(255, 255, 255, 0.10);
    --tui-glint-dark:  rgba(0, 0, 0, 0.20);

    /* Charts: same entity order; only sky drops one step darker on
       dark surfaces (validated). Orange/teal stay identical to the
       reference product's dark dashboards. */
    --tui-chart-4: #0284C7;

    /* Shadows read heavier on dark surfaces */
    --tui-shadow-2xs: 0 1px rgb(0 0 0 / 0.20);
    --tui-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.24);
    --tui-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.30), 0 1px 2px -1px rgb(0 0 0 / 0.30);
    --tui-shadow-md:  0 2px 4px -1px rgb(0 0 0 / 0.30), 0 1px 3px -1px rgb(0 0 0 / 0.30);
    --tui-shadow-lg:  0 6px 12px -3px rgb(0 0 0 / 0.36), 0 3px 5px -3px rgb(0 0 0 / 0.30);
    --tui-shadow-xl:  0 14px 20px -5px rgb(0 0 0 / 0.36), 0 6px 8px -5px rgb(0 0 0 / 0.30);
    --tui-shadow-2xl: 0 20px 40px -10px rgb(0 0 0 / 0.50);
  }


/* ============================================================
   Base element styles (typography.md, layout.md)
   Scoped under .tui so a page can adopt the system by putting
   class="tui" on <body> without fighting its legacy styles.
   ============================================================ */

.tui {
  font-family: var(--tui-font);
  background: var(--tui-bg-primary-soft);
  color: var(--tui-fg-body);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.tui h1, .tui h2, .tui h3, .tui h4, .tui h5, .tui h6 {
  font-weight: 600;
  color: var(--tui-fg-heading);
  margin: 0;
  text-wrap: balance;
}

/* Mobile-first heading scale */
.tui h1 { font-size: 24px; line-height: 1.15; letter-spacing: -0.4px; margin-bottom: 16px; }
.tui h2 { font-size: 20px; line-height: 1.2;  }
.tui h3 { font-size: 18px; line-height: 1.25; }
.tui h4 { font-size: 16px; line-height: 1.3;  }
.tui h5 { font-size: 15px; line-height: 1.4;  }
.tui h6 { font-size: 14px; line-height: 1.4;  }

@media (min-width: 768px) {
  .tui h1 { font-size: 30px; }
  .tui h2 { font-size: 24px; }
  .tui h3 { font-size: 22px; }
  .tui h4 { font-size: 18px; }
  .tui h5 { font-size: 16px; }
  .tui h6 { font-size: 15px; }
}

@media (min-width: 1024px) {
  .tui h1 { font-size: 36px; }
  .tui h2 { font-size: 28px; }
  .tui h3 { font-size: 24px; }
  .tui h4 { font-size: 20px; }
  .tui h5 { font-size: 18px; }
  .tui h6 { font-size: 16px; }
}

.tui p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tui-fg-body);
  max-width: 75ch;
  margin: 0 0 12px;
  text-wrap: pretty;
}

.tui .tui-lead  { font-size: 18px; max-width: 70ch; }
.tui small,
.tui .tui-small { font-size: 12px; line-height: 1.5; color: var(--tui-fg-body); }

/* Content links only; component links (.tui-topbar__link, .tui-sidebar__item,
   .tui-btn as <a>, ...) carry their own classes and styling. */
.tui a:not([class]),
.tui .tui-link {
  color: var(--tui-fg-brand);
  text-decoration: underline;
}
.tui a:not([class]):hover,
.tui .tui-link:hover { text-decoration: none; }

.tui strong { color: var(--tui-fg-heading); font-weight: 600; }

.tui .tui-caps {
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 12px;
  font-weight: 500;
}

/* ---- Layout primitives (layout.md) ---- */
.tui-container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
}

.tui-section     { padding-block: 48px; background: var(--tui-bg-primary-soft); }
.tui-section--alt { background: var(--tui-bg-secondary-soft); }
.tui-section > .tui-container > header { margin-bottom: 24px; }

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