/* =====================================================================
 * Bac Tom Design System — Tokens
 * Thuận Tự Nhiên / In Harmony with Nature
 *
 * Import this once at the top of any HTML file:
 *   <link rel="stylesheet" href="../../colors_and_type.css">
 *
 * Brand palette extracted from official logo:
 *   --brand-brown  #732A14  (chestnut — logo typeface)
 *   --primary      #5CAD25  (leaf green — logo icon & tagline)
 * ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color: surfaces (dark earthy base) ---------- */
  --surface-0: #120E0A;   /* sidebar / page edges — near-black, warm */
  --surface-1: #1A1410;   /* page background */
  --surface-2: #221B14;   /* card surface */
  --surface-3: #2C231A;   /* card hover / raised */
  --surface-4: #382D22;   /* subtle highlight surface */

  /* ---------- Color: brand ---------- */
  --primary:        #5CAD25;   /* leaf green — action CTA, active states */
  --primary-glow:   #72C63A;   /* hover / brighter */
  --primary-deep:   #448A18;   /* pressed / active */
  --primary-pale:   #1B3A09;   /* highlighted row bg / tinted surface */

  --brand-brown:    #732A14;   /* chestnut — logo color, heading accent */
  --brand-brown-lt: #C4683E;   /* lighter brown — text on dark surfaces */

  --accent-deep:    #3D8A1A;   /* darker green — hover borders, focus ring */

  /* ---------- Color: borders & dividers ---------- */
  --border:        #2E2318;
  --border-strong: #3D3025;
  --border-soft:   #1E1710;

  /* ---------- Color: text ---------- */
  --text-1: #F2EBE0;          /* primary — warm white */
  --text-2: #B8A895;          /* secondary — warm medium */
  --text-3: #7A6A55;          /* tertiary / hint / muted */
  --text-on-primary: #0B2005; /* text on green button */

  /* ---------- Color: semantic status ---------- */
  --ok:    #4DB870;   /* VERIFIED */
  --info:  #4A9EE0;   /* ACTIVE / informational */
  --warn:  #E8A83A;   /* ANALYZING / PENDING */
  --err:   #E05252;   /* BLOCKED / FAILED */

  --ok-soft:   rgba(77,184,112,.15);
  --info-soft: rgba(74,158,224,.15);
  --warn-soft: rgba(232,168,58,.15);
  --err-soft:  rgba(224,82,82,.15);

  --ok-pale:   rgba(77,184,112,.08);
  --info-pale: rgba(74,158,224,.08);
  --warn-pale: rgba(232,168,58,.08);
  --err-pale:  rgba(224,82,82,.08);

  /* ---------- Color: chart series (Smart BI — do NOT reuse status colors) ---------- */
  --chart-1: #5CAD25;   /* brand green */
  --chart-2: #4A9EE0;   /* sky blue */
  --chart-3: #E8A83A;   /* warm amber */
  --chart-4: #A855C8;   /* violet */
  --chart-5: #1BBFA8;   /* teal */
  --chart-6: #E05A8A;   /* rose */

  /* ---------- Color: quality scale gradient (traceability heatmap) ---------- */
  --scale-grad: linear-gradient(90deg, #E05252 0%, #E8A83A 50%, #5CAD25 100%);

  /* ---------- Type: families ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:      "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---------- Type: sizes & line-heights ---------- */
  --fs-12: 12px;  --lh-12: 16px;
  --fs-13: 13px;  --lh-13: 18px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-18: 18px;  --lh-18: 26px;
  --fs-22: 22px;  --lh-22: 30px;
  --fs-28: 28px;  --lh-28: 36px;
  --fs-36: 36px;  --lh-36: 44px;
  --fs-48: 48px;  --lh-48: 56px;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  /* ---------- Radius ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;    /* primary card radius */
  --r-xl:   24px;    /* Mobile / Website consumer panels */
  --r-pill: 999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-card:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 24px rgba(0,0,0,.40);
  --shadow-pop: 0 16px 48px rgba(0,0,0,.55);

  --glow-primary:
    0 0 0 1px rgba(92,173,37,.45),
    0 0 24px rgba(92,173,37,.25);
  --glow-ok:
    0 0 0 1px rgba(77,184,112,.45),
    0 0 16px rgba(77,184,112,.30);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --dur-fast: 80ms;
  --dur-base: 150ms;
  --dur-slow: 220ms;

  /* ---------- Z-index ---------- */
  --z-overlay: 50;
  --z-modal:   60;
  --z-toast:   70;

  /* ---------- Layout — workspace shell ---------- */
  --sidebar-w-expanded:  252px;
  --sidebar-w-collapsed: 72px;
  --header-h:            64px;
  --content-pad-y:       16px;
  --content-pad-x:       24px;

  /* ---------- Control heights ---------- */
  --h-xs: 32px;
  --h-sm: 36px;
  --h-md: 40px;
  --h-lg: 44px;

  /* ---------- Shadows — light scale ---------- */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md: 0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-lg: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-xl: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);

  /* ---------- Transitions ---------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.20s ease;
  --transition-slow: 0.30s ease;
}

/* =====================================================================
 * Light mode token overrides — html[data-theme="light"]
 * Used by: Website hero sections, Mobile consumer screens
 * ===================================================================== */
[data-theme="light"] {
  /* Surfaces: cool grey — matches Ecovation design system */
  --surface-0: #EAEBEF;   /* sidebar / edges */
  --surface-1: #F2F3F7;   /* app background */
  --surface-2: #FFFFFF;   /* card surface */
  --surface-3: #F5F5F5;   /* hover / raised */
  --surface-4: #EEEEEE;   /* highlight surface */

  /* Text */
  --text-1: #1F2328;          /* primary — near-black */
  --text-2: #59636E;          /* secondary */
  --text-3: #9E9E9E;          /* tertiary / hint */
  --text-on-primary: #FFFFFF;

  /* Borders */
  --border:        #E0E0E0;
  --border-strong: #BDBDBD;
  --border-soft:   #F1F1F1;

  --accent-deep: #3D8A1A;

  /* Brand: primary darkened for WCAG AA on white (#5CAD25 fails 4.5:1) */
  --primary:      #448A18;
  --primary-glow: #5CAD25;
  --primary-deep: #336E12;
  --primary-pale: #E8F5D8;

  /* Shadows */
  --shadow-card: var(--shadow-md);
  --shadow-pop:  var(--shadow-xl);

  --glow-primary:
    0 0 0 1px rgba(68,138,24,.40),
    0 0 16px rgba(68,138,24,.18);
  --glow-ok:
    0 0 0 1px rgba(42,122,72,.40),
    0 0 12px rgba(42,122,72,.18);

  /* Status: darkened for WCAG AA on white */
  --ok:   #2A7A48;
  --info: #1A5CB8;
  --warn: #8A5A00;
  --err:  #B82828;

  --ok-soft:   rgba(42,122,72,.12);
  --info-soft: rgba(26,92,184,.10);
  --warn-soft: rgba(138,90,0,.10);
  --err-soft:  rgba(184,40,40,.10);

  --ok-pale:   rgba(42,122,72,.06);
  --info-pale: rgba(26,92,184,.06);
  --warn-pale: rgba(138,90,0,.06);
  --err-pale:  rgba(184,40,40,.06);
}

/* =====================================================================
 * Glass utilities — Mobile and Website ONLY
 * backdrop-filter is BANNED on Trade / Check / Smart BI
 * ===================================================================== */
.glass {
  background: rgba(34, 27, 20, 0.68);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.glass-strong {
  background: rgba(22, 17, 13, 0.80);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .glass-strong {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.12);
}

/* =====================================================================
 * Mobile-specific constants
 * ===================================================================== */
:root {
  --mobile-status-h:  56px;  /* status bar + top inset */
  --mobile-header-h:  52px;  /* TopBar */
  --mobile-nav-h:     80px;  /* BottomNav incl. safe-area padding */
  --touch-min:        48px;  /* minimum tap target */
  --mobile-frame-w:  390px;
  --mobile-frame-h:  844px;
}

html { transition: background-color 200ms; }

/* =====================================================================
 * Base reset
 * ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--text-1);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: common-ligatures;
}

/* =====================================================================
 * Semantic typography classes
 * ===================================================================== */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-48);
  line-height: var(--lh-48);
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-36);
  line-height: var(--lh-36);
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-28);
  line-height: var(--lh-28);
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.t-h2 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.t-h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  color: var(--text-1);
}
.t-body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--text-1);
}
.t-body-lg {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--text-1);
}
.t-small {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  color: var(--text-2);
}
.t-caption {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-3);
}
.t-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.t-stat {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-36);
  line-height: var(--lh-36);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * Common primitives
 * ===================================================================== */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: var(--sp-5); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font: 600 11px/14px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-1);
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.pill--ok    { color: var(--ok);   background: var(--ok-soft);   border-color: rgba(77,184,112,.35); }
.pill--info  { color: var(--info); background: var(--info-soft); border-color: rgba(74,158,224,.35); }
.pill--warn  { color: var(--warn); background: var(--warn-soft); border-color: rgba(232,168,58,.35); }
.pill--err   { color: var(--err);  background: var(--err-soft);  border-color: rgba(224,82,82,.35); }