/* =============================================================================
   FIT Agent Hub — Design tokens (TDTU / Khoa CNTT)  ·  single source of truth
   ----------------------------------------------------------------------------
   Shared by the public chat (/) and the admin console (/admin-v2, via the
   admin-v2/tokens.css shim). Colours come from the official TDTU logo and the
   www.tdtu.edu.vn / it.tdtu.edu.vn stylesheets — see docs/khao-sat/06 §B2, §B5.

   Rules
   - TDTU blue is the PRIMARY colour (header, user bubble, buttons, links, focus).
   - TDTU red is an ACCENT only (header rule, labels, light warnings). Red text
     uses --accent (#C5050C, 6.17:1 on white). The logo red #ED252A is 4.29:1 →
     decoration / large text only (--accent-decor), never body text.
   - Components reference SEMANTIC tokens below, never raw hex values.
   - Dark mode: <html data-theme="dark">. /static/shared/fit-boot.js sets the
     attribute before first paint (saved choice, else the OS preference).
   Every text pair used here is >= 4.5:1 and every UI pair >= 3:1 (WCAG 2.x AA).
   ============================================================================= */

:root {
  color-scheme: light;

  /* ── Brand primitives (do not use directly in components) ─────────────── */
  --tdtu-blue-50:  #EFF2F8;
  --tdtu-blue-100: #DEE5F2;
  --tdtu-blue-200: #BDCCE4;
  --tdtu-blue-300: #96ADD4;
  --tdtu-blue-400: #6788C1;
  --tdtu-blue-500: #3863AD;
  --tdtu-blue-600: #15489F;   /* TDTU blue (www CSS; logo #15489D) */
  --tdtu-blue-700: #123D87;
  --tdtu-blue-800: #0E326F;   /* TDTU navy (headings / nav on www) */
  --tdtu-blue-900: #092048;
  --tdtu-red-50:   #FBEDEE;
  --tdtu-red-100:  #F6D7D8;
  --tdtu-red-300:  #E58E92;
  --tdtu-red-500:  #ED252A;   /* logo red: decoration / large text only */
  --tdtu-red-600:  #C5050C;   /* accent red (www CSS): AA on white */
  --tdtu-red-700:  #A4040A;

  /* ── Neutrals (graphite) ──────────────────────────────────────────────── */
  --gray-50:  #F8F9FB;
  --gray-100: #F1F3F7;
  --gray-200: #E3E7EE;
  --gray-300: #CDD3DD;
  --gray-400: #9AA3B2;
  --gray-500: #677184;
  --gray-600: #4B5565;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ── Brand scales consumed by components ──────────────────────────────── */
  /* --brand-*: admin accent scale. --navy-*: structural blue (chat + knowledge). */
  --brand-50:  var(--tdtu-blue-50);
  --brand-100: var(--tdtu-blue-100);
  --brand-200: var(--tdtu-blue-200);
  --brand-300: var(--tdtu-blue-300);
  --brand-400: var(--tdtu-blue-400);
  --brand-500: var(--tdtu-blue-500);
  --brand-600: var(--tdtu-blue-600);
  --brand-700: var(--tdtu-blue-700);
  --brand-800: var(--tdtu-blue-800);
  --brand-900: var(--tdtu-blue-900);
  --navy-50:  var(--tdtu-blue-50);
  --navy-100: var(--tdtu-blue-100);
  --navy-200: var(--tdtu-blue-200);
  --navy-300: var(--tdtu-blue-300);
  --navy-400: var(--tdtu-blue-400);
  --navy-500: var(--tdtu-blue-500);
  --navy-600: var(--tdtu-blue-600);
  --navy-700: var(--tdtu-blue-700);
  --navy-800: var(--tdtu-blue-800);
  --navy-900: var(--tdtu-blue-900);

  /* ── Primary (TDTU blue) ──────────────────────────────────────────────── */
  --primary:        var(--tdtu-blue-600);   /* text, icons, borders AND solid fills */
  --primary-strong: var(--tdtu-blue-800);   /* hover fill / emphasised text */
  --primary-soft:   #EAF0FA;                /* tinted background behind --primary text */
  --on-primary:     #FFFFFF;                /* text/icons ON a --primary or --primary-strong fill */
  --primary-rgb:    21 72 159;              /* for rgb(var(--primary-rgb) / α) washes + rings */

  /* ── Accent (TDTU red) ────────────────────────────────────────────────── */
  --accent:         var(--tdtu-red-600);
  --accent-strong:  var(--tdtu-red-700);
  --accent-soft:    #FDECEC;
  --on-accent:      #FFFFFF;
  --accent-decor:   var(--tdtu-red-500);    /* decorative only (header rule, logo) */
  /* "highlight" = pending / needs-attention tone used by the knowledge module (status
     pills, drop zone, confidence bars). Amber, NOT the brand red (red = errors/labels). */
  --highlight:      var(--warning);
  --highlight-soft: var(--warning-soft);

  /* ── Status ───────────────────────────────────────────────────────────── */
  --success: #1E7B34;  --success-soft: #E8F5EC;
  --warning: #8A5A00;  --warning-soft: #FFF4DB;
  --danger:  #B3261E;  --danger-soft:  #FDECEC;  --on-danger: #FFFFFF;
  --on-success: #FFFFFF;                    /* text on a solid --success-600 fill */
  --error:   var(--danger);
  --info:    var(--primary); --info-soft: var(--primary-soft);
  /* status scales used by admin badges/alerts */
  --success-50: #ECFDF3; --success-100: #D1FAE0; --success-500: #12A150; --success-600: #1E7B34; --success-700: #17612A;
  --warning-50: #FFF8E6; --warning-100: #FEEFC3; --warning-500: #D99A00; --warning-600: #A36B00; --warning-700: #8A5A00;
  --danger-50:  #FDECEC; --danger-100:  #FAD4D4; --danger-500:  #D93A30; --danger-600:  #B3261E; --danger-700:  #8F1D17;
  --info-50:    #EAF0FA; --info-100:    #DEE5F2; --info-500:    #3863AD; --info-600:    #15489F; --info-700:    #123D87;

  /* ── Surfaces, text, lines (chat + admin) ─────────────────────────────── */
  --bg:          #FFFFFF;                    /* chat canvas */
  --paper:       #FFFFFF;                    /* composer, modal, popover */
  --panel:       #FFFFFF;                    /* cards on the canvas */
  --panel-2:     #F3F4F8;                    /* sunken: table head, stats, kbd (= www footer) */
  --surface-1:   #F3F4F8;                    /* side panels, assistant bubble */
  --ivory:       #F5F7FB;                    /* legacy name: admin module canvas */
  --rule:        #DCE2EC;                    /* decorative lines only */
  --rule-soft:   #E9EDF4;
  --border:      var(--rule);
  --border-input: #7A879C;                   /* form controls: >= 3:1 */
  --text:        #1F2937;
  --text-2:      #4B5565;
  --muted:       #5A6578;                    /* timestamps, captions: >= 4.5:1 on white + surface-1 */
  --heading:     var(--tdtu-blue-800);
  --code-bg:     #EEF2F8;
  --citation:    var(--primary);
  --user-bg:     var(--primary);
  --user-text:   var(--on-primary);
  --bot-bg:      var(--surface-1);
  --bot-text:    var(--text);

  /* admin semantic names (components.css, modules) */
  --background:       var(--ivory);
  --surface:          #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-sunken:   #EEF1F6;
  --surface-hover:    #EEF2F8;
  --border-default:   var(--rule);
  --border-strong:    var(--border-input);
  --border-focus:     var(--primary);
  --text-primary:     var(--text);
  --text-secondary:   #3B4452;
  --text-muted:       var(--muted);
  --text-subtle:      #677184;
  --text-inverse:     #FFFFFF;
  --text-brand:       var(--primary);
  --text-danger:      var(--danger);
  --text-success:     var(--success);
  --text-warning:     var(--warning);
  --link:             var(--primary);
  --link-hover:       var(--accent);

  /* knowledge-module aliases */
  --bg-paper:      var(--surface);
  --bg-subtle:     var(--surface-sunken);
  --surface-2:     var(--surface-sunken);
  --surface-card:  var(--surface-elevated);
  --text-strong:   var(--text-primary);
  --border-subtle: var(--rule-soft);

  /* ── Chat components ──────────────────────────────────────────────────── */
  --chat-header-bg:     var(--tdtu-blue-800);
  --chat-header-fg:     #FFFFFF;
  --chat-header-fg-2:   #D3DDF0;              /* secondary header text: 10.4:1 on navy */
  --chat-header-hover:  rgb(255 255 255 / 0.14);
  --chat-header-control: rgb(255 255 255 / 0.10);  /* chips / select on the navy header */
  --chat-header-line:   rgb(255 255 255 / 0.42);   /* their borders: >= 3:1 on navy */
  --chat-header-accent: var(--accent-decor);  /* 3px rule under the header */
  --chat-logo-tile-bg:  #FFFFFF;              /* logo always sits on a white tile */
  --chat-notice-bg:     #EAF0FA;              /* AI-transparency notice bar */
  --chat-notice-fg:     #0E326F;
  --chat-notice-border: #C9D6EE;
  --chat-avatar-bg:     var(--tdtu-blue-800);
  --chat-avatar-fg:     #FFFFFF;
  --chat-citation-bg:   var(--primary-soft);
  --chat-citation-fg:   var(--primary);

  /* ── Hero band + charts on it (admin overview) — same in both themes ───── */
  --hero-band-from: var(--tdtu-blue-600);
  --hero-band-to:   var(--tdtu-blue-800);
  --hero-fg:        #FFFFFF;
  --hero-fg-2:      #D3DDF0;                 /* >= 6:1 on the band */
  --hero-fg-3:      #B8C7E6;                 /* >= 4.9:1 on the band */
  --hero-line:      rgb(255 255 255 / 0.16);
  --hero-shadow:    0 10px 30px -12px rgb(14 50 111 / 0.45);
  --hero-cta-bg:    #FFFFFF;
  --hero-cta-fg:    var(--tdtu-blue-800);
  --chart-1: #8DB3F7;  --chart-2: #FF8A8E;  --chart-3: #EAF0FA;  --chart-4: #F2C46B;  --chart-other: #A9B6CC;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-sans: 'Roboto', 'Roboto Fallback', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Montserrat', 'Montserrat Fallback', 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono-stack: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-display: 28px;  --lh-display: 36px;
  --font-h1: 22px;       --lh-h1: 28px;
  --font-h2: 18px;       --lh-h2: 24px;
  --font-h3: 15px;       --lh-h3: 20px;
  --font-h4: 14px;       --lh-h4: 19px;
  --font-body: 14px;     --lh-body: 20px;
  --font-body-sm: 13px;  --lh-body-sm: 18px;
  --font-caption: 12px;  --lh-caption: 16px;
  --font-mono: 12px;     --lh-mono: 16px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Spacing (4px base) ───────────────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px; --space-8: 32px;  --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* ── Shape, elevation, motion ─────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgb(14 50 111 / 0.08);
  --shadow-md: 0 1px 2px rgb(14 50 111 / 0.08), 0 4px 16px rgb(14 50 111 / 0.10);
  --shadow-lg: 0 12px 40px rgb(14 50 111 / 0.14), 0 2px 6px rgb(14 50 111 / 0.08);
  --shadow-xl: 0 20px 48px rgb(14 50 111 / 0.18), 0 4px 10px rgb(14 50 111 / 0.08);
  --overlay:   rgb(9 32 72 / 0.55);           /* modal backdrop */

  --z-sticky: 10; --z-overlay: 50; --z-modal: 60; --z-toast: 70; --z-cmdk: 80;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
  --duration-slow: 260ms;
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* scales flip: low steps become dark tints, high steps light tints */
  --brand-50:  #101C36;
  --brand-100: #16264A;
  --brand-200: #1F3360;
  --brand-300: #2D4A85;
  --brand-400: #4A6FB5;
  --brand-500: #6E93D6;
  --brand-600: #8DB3F7;
  --brand-700: #B5CDF9;
  --brand-800: #D3E1FB;
  --brand-900: #EBF1FD;
  --navy-50:  #14213B;
  --navy-100: #1B2A48;
  --navy-200: #24345A;
  --navy-300: #34466E;
  --navy-400: #4F628A;
  --navy-500: #6B7A99;
  --navy-600: #8E9DBA;
  --navy-700: #A9B6CC;
  --navy-800: #C9D3E4;
  --navy-900: #E6EBF5;

  --primary:        #8DB3F7;
  --primary-strong: #B5CDF9;
  --primary-soft:   #16264A;
  --on-primary:     #0B1426;
  --primary-rgb:    141 179 247;

  --accent:         #FF8A8E;
  --accent-strong:  #FFB1B4;
  --accent-soft:    #2A1218;
  --on-accent:      #0B1426;

  --success: #6FCF8E;  --success-soft: #0F2A1A;
  --warning: #F2C46B;  --warning-soft: #2E2410;
  --danger:  #FF8A80;  --danger-soft:  #2A1218;  --on-danger: #0B1426;
  --on-success: #0B1426;
  --success-50: #0F2A1A; --success-100: #143821; --success-500: #6FCF8E; --success-600: #6FCF8E; --success-700: #9BE0B1;
  --warning-50: #2E2410; --warning-100: #3D3015; --warning-500: #F2C46B; --warning-600: #F2C46B; --warning-700: #F6D695;
  --danger-50:  #2A1218; --danger-100:  #3A1820; --danger-500:  #FF8A80; --danger-600:  #FF8A80; --danger-700:  #FFB4AC;
  --info-50:    #16264A; --info-100:    #1F3360; --info-500:    #8DB3F7; --info-600:    #8DB3F7; --info-700:    #B5CDF9;

  --bg:          #0B1426;
  --paper:       #0F1A31;
  --panel:       #14213B;
  --panel-2:     #1B2A48;
  --surface-1:   #14213B;
  --ivory:       #0B1426;
  --rule:        #24345A;
  --rule-soft:   #1B2A48;
  --border-input: #6B7A99;
  --text:        #E6EBF5;
  --text-2:      #C3CDDF;
  --muted:       #A9B6CC;
  --heading:     #E6EBF5;
  --code-bg:     #0B1426;
  --bot-bg:      var(--surface-1);

  --surface:          #14213B;
  --surface-elevated: #1B2A48;
  --surface-sunken:   #0F1A31;
  --surface-hover:    #1B2A48;
  --text-secondary:   #C3CDDF;
  --text-subtle:      #8C9AB3;
  --text-inverse:     #0B1426;

  --chat-header-bg:     var(--tdtu-blue-800);
  --chat-header-fg:     #FFFFFF;
  --chat-header-fg-2:   #D3DDF0;
  --chat-notice-bg:     #16264A;
  --chat-notice-fg:     #D3E1FB;
  --chat-notice-border: #24345A;
  --chat-avatar-bg:     #2A56B0;
  --chat-avatar-fg:     #FFFFFF;
  --user-bg:            #2A56B0;               /* white text 6.87:1 */
  --user-text:          #FFFFFF;

  --hero-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.60);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.30), 0 4px 16px rgb(0 0 0 / 0.40);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.50), 0 2px 6px rgb(0 0 0 / 0.30);
  --shadow-xl: 0 20px 48px rgb(0 0 0 / 0.60), 0 4px 10px rgb(0 0 0 / 0.30);
  --overlay:   rgb(3 8 18 / 0.70);
}

/* ── Base element styles ────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--font-body);
  line-height: var(--lh-body);
  background: var(--background);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Tabular numerals for cost/latency cells */
.tabular { font-variant-numeric: tabular-nums; }

/* Mono font + tabular for IDs and numeric data */
.mono { font-family: var(--font-mono-stack); font-size: var(--font-mono); }

/* Focus ring everywhere — accessible + branded */
*:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Selection colour */
::selection { background: var(--brand-200); color: var(--brand-900); }
:root[data-theme="dark"] ::selection { background: var(--brand-300); color: #FFFFFF; }

/* Smooth bg/colour transition on theme switch */
html { transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
}