/* ==========================================================================
   ECOVATION — colors_and_type.css
   Single source of truth for every design token in this repository.

   Import once per HTML file, always from the repo root:
     <link rel="stylesheet" href="../../colors_and_type.css">

   Light is the default theme (:root). Dark is an override on
   html[data-theme="dark"] — set by shared/Theme.jsx.

   Values follow the LIVE workspace apps (verify.ecovation.vn brand config:
   displayName "ECOCheck", primaryColor #0A39CB, Be Vietnam Pro, radius 10,
   control heights 40 / 44), not the marketing site. Never hardcode a hex
   that already has a token.
   ========================================================================== */

@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 {
  /* --- Surfaces -------------------------------------------------------- */
  --surface-0: #FFFFFF;   /* sidebar / topbar */
  --surface-1: #F2F3F7;   /* page background */
  --surface-2: #FFFFFF;   /* card surface */
  --surface-3: #F5F5F5;   /* card hover / raised */
  --surface-4: #EAF0FD;   /* selected row / tinted highlight */

  /* --- Brand ----------------------------------------------------------- */
  --primary:        #0A39CB;   /* ECOCheck blue — CTA, active states */
  --primary-glow:   #2E5BD6;   /* hover */
  --primary-deep:   #072B9B;   /* pressed */
  --primary-pale:   #EAF0FD;   /* tinted surface / highlighted row */
  --primary-text:   #0A39CB;   /* brand colour when used as TEXT, not as a fill */

  --secondary:      #00DE67;   /* Ecovation green — brand mark, accent only */
  --secondary-deep: #00B854;
  --secondary-pale: #D6F8E5;
  --text-on-secondary: #04261A; /* ink on green fills — green is too light for white */

  --navy: #001A4D;             /* deep brand navy */

  /* --- Borders --------------------------------------------------------- */
  --border:        #D9D9D9;
  --border-strong: #BFBFBF;
  --border-soft:   #F1F1F1;

  /* --- Text ------------------------------------------------------------ */
  --text-1: #1F2328;           /* primary            15.8:1 on white */
  --text-2: #59636E;           /* secondary           6.1:1 */
  --text-3: #666F77;           /* tertiary / muted    5.1:1 on card, 4.6:1 on page */
  --text-on-primary: #FFFFFF;  /* on --primary        8.5:1 */

  /* --- Status — five reserved roles, never add a sixth ------------------ */
  --ok:    #0A8047;   /* VERIFIED / SECURED   5.0:1 */
  --info:  #0E6FCF;   /* ACTIVE / thông tin   5.0:1 */
  --warn:  #A85B00;   /* ANALYZING / PENDING  5.1:1 */
  --err:   #CF1322;   /* BLOCKED / FAILED     5.6:1 */

  --ok-soft:   rgba(10,128,71,.15);
  --info-soft: rgba(14,111,207,.15);
  --warn-soft: rgba(168,91,0,.15);
  --err-soft:  rgba(207,19,34,.15);

  --ok-pale:   rgba(10,128,71,.08);
  --info-pale: rgba(14,111,207,.08);
  --warn-pale: rgba(168,91,0,.08);
  --err-pale:  rgba(207,19,34,.08);

  /* --- Charts — never reuse the status colours ------------------------- */
  --chart-1: #0A39CB;
  --chart-2: #00B854;
  --chart-3: #FF8C00;
  --chart-4: #8B5CF6;
  --chart-5: #14B8A6;
  --chart-6: #06B6D4;

  /* --- Ecosystem module accents (hub tiles) ---------------------------- */
  --mod-origin:       #0A39CB;
  --mod-check:        #FF8C00;
  --mod-trade:        #4F46E5;
  --mod-supply:       #8B5CF6;
  --mod-grow:         #00B854;
  --mod-shop:         #14B8A6;
  --mod-bi:           #06B6D4;
  --mod-mobile:       #DB2777;

  /* Matching 30% tints for tile glows — CSS cannot derive rgba() from a hex token */
  --mod-origin-glow:       rgba(10,57,203,.30);
  --mod-check-glow:        rgba(255,140,0,.30);
  --mod-trade-glow:        rgba(79,70,229,.30);
  --mod-supply-glow:       rgba(139,92,246,.30);
  --mod-grow-glow:         rgba(0,184,84,.35);
  --mod-shop-glow:         rgba(20,184,166,.30);
  --mod-bi-glow:           rgba(6,182,212,.30);
  --mod-mobile-glow:       rgba(219,39,119,.30);

  /* Hub page ambience */
  --hub-wash-1: rgba(10,57,203,.06);
  --hub-wash-2: rgba(0,222,103,.07);
  --tile-sheen: rgba(255,255,255,.25);
  --tile-shadow-fallback: rgba(0,0,0,.15);

  /* --- Integrity gradient — Zero Trust L1→L4 coverage ------------------ */
  --scale-grad: linear-gradient(90deg, #CF1322 0%, #A85B00 50%, #0A8047 100%);

  /* --- GIS map (decorative terrain placeholder) ------------------------ */
  --map-bg:            #C8E6C9;
  --map-grad-1:        #AED8AE;
  --map-grad-2:        #8AB88A;
  --map-zone-ok:       rgba(0,184,84,.55);
  --map-zone-warn:     rgba(255,140,0,.45);
  --map-zone-err:      rgba(207,19,34,.40);
  --map-zone-info:     rgba(10,57,203,.30);
  --map-road:          rgba(255,255,255,.45);
  --map-overlay-bg:    rgba(255,255,255,.92);
  --map-overlay-text:  #1F2328;

  /* --- Typography ------------------------------------------------------ */
  --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;

  /* Size / line-height pairs — always use them together.
     Line heights are widened for Vietnamese diacritics (ầ ẩ ẫ ấ ậ). */
  --fs-12: 12px;  --lh-12: 18px;
  --fs-13: 13px;  --lh-13: 20px;
  --fs-14: 14px;  --lh-14: 22px;
  --fs-16: 16px;  --lh-16: 26px;
  --fs-18: 18px;  --lh-18: 28px;
  --fs-22: 22px;  --lh-22: 32px;
  --fs-28: 28px;  --lh-28: 38px;
  --fs-36: 36px;  --lh-36: 46px;
  --fs-48: 48px;  --lh-48: 58px;

  /* --- 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 — 10px is the Ant Design borderRadius of the live app ---- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;    /* default card / control radius */
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* --- Elevation ------------------------------------------------------- */
  --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);

  --shadow-card: var(--shadow-sm);
  --shadow-pop:  var(--shadow-xl);

  --focus-ring: 0 0 0 3px rgba(10,57,203,.22);

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

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

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

  /* --- Control heights — Ant controlHeight 40, controlHeightLG 44 ------ */
  --h-xs: 32px;
  --h-sm: 36px;
  --h-md: 40px;
  --h-lg: 44px;
}

/* ==========================================================================
   Dark theme — html[data-theme="dark"]
   ========================================================================== */

[data-theme="dark"] {
  --surface-0: #04082A;
  --surface-1: #07103C;
  --surface-2: #0F1A52;
  --surface-3: #1A2566;
  --surface-4: #1E2E66;

  --primary:        #2B60D6;   /* white text 5.6:1 */
  --primary-glow:   #4A7DEB;
  --primary-deep:   #1E4FD0;
  --primary-pale:   #1E2E66;
  --primary-text:   #7FA6FF;   /* 6.8:1 on --surface-2 — --primary itself is only 2.9:1 */

  --secondary:      #00DE67;
  --secondary-deep: #00B854;
  --secondary-pale: #0E3D24;
  --text-on-secondary: #04261A;

  --navy: #04082A;

  --border:        #1F2A55;
  --border-strong: #2D3A6E;
  --border-soft:   #131F5C;

  --text-1: #F8FAFC;
  --text-2: #C7D4F5;
  --text-3: #8B9BC8;
  --text-on-primary: #FFFFFF;

  /* Status — lightened for AA on the navy surfaces */
  --ok:    #34D399;
  --info:  #38BDF8;
  --warn:  #FBBF24;
  --err:   #F87171;

  --ok-soft:   rgba(52,211,153,.18);
  --info-soft: rgba(56,189,248,.18);
  --warn-soft: rgba(251,191,36,.18);
  --err-soft:  rgba(248,113,113,.18);

  --ok-pale:   rgba(52,211,153,.10);
  --info-pale: rgba(56,189,248,.10);
  --warn-pale: rgba(251,191,36,.10);
  --err-pale:  rgba(248,113,113,.10);

  --chart-1: #7FA6FF;
  --chart-2: #34D399;
  --chart-3: #FBBF24;
  --chart-4: #A78BFA;
  --chart-5: #2DD4BF;
  --chart-6: #22D3EE;

  --hub-wash-1: rgba(74,125,235,.10);
  --hub-wash-2: rgba(0,222,103,.06);
  --tile-sheen: rgba(255,255,255,.10);
  --tile-shadow-fallback: rgba(0,0,0,.40);

  --scale-grad: linear-gradient(90deg, #F87171 0%, #FBBF24 50%, #34D399 100%);

  --map-bg:            #07211A;
  --map-grad-1:        #16301F;
  --map-grad-2:        #0E2417;
  --map-zone-ok:       rgba(52,211,153,.32);
  --map-zone-warn:     rgba(251,191,36,.28);
  --map-zone-err:      rgba(248,113,113,.28);
  --map-zone-info:     rgba(127,166,255,.25);
  --map-road:          rgba(255,255,255,.06);
  --map-overlay-bg:    rgba(4,8,42,.90);
  --map-overlay-text:  #F8FAFC;

  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.40);
  --shadow-md: 0 1px 3px 0 rgba(0,0,0,.45);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.50);
  --shadow-xl: 0 12px 32px rgba(0,0,0,.60);

  --focus-ring: 0 0 0 3px rgba(74,125,235,.40);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

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

h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: -.015em; }

a { color: var(--primary-text); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

::selection { background: var(--primary-pale); color: var(--text-1); }

/* ==========================================================================
   Semantic type classes
   ========================================================================== */

.t-display-xl { font-family: var(--font-display); font-size: var(--fs-48); line-height: var(--lh-48); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 50; letter-spacing: -.02em; }
.t-display    { font-family: var(--font-display); font-size: var(--fs-36); line-height: var(--lh-36); font-weight: 500; font-variation-settings: "opsz" 96, "SOFT" 40; letter-spacing: -.02em; }
.t-h1         { font-size: var(--fs-28); line-height: var(--lh-28); font-weight: 600; }
.t-h2         { font-size: var(--fs-22); line-height: var(--lh-22); font-weight: 600; }
.t-h3         { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 600; }
.t-body-lg    { font-size: var(--fs-16); line-height: var(--lh-16); }
.t-body       { font-size: var(--fs-14); line-height: var(--lh-14); }
.t-small      { font-size: var(--fs-13); line-height: var(--lh-13); }
.t-caption    { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-3); }
.t-label      { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.t-stat       { font-size: var(--fs-28); line-height: var(--lh-28); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.t-mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* QR / lô / mã tem — always mono + tabular so codes align in a column. */
.t-code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  letter-spacing: .02em;
  color: var(--text-1);
}

/* ==========================================================================
   Primitives
   ========================================================================== */

.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.card-pad { padding: var(--sp-6); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 22px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-3);
  font-size: var(--fs-12);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.pill--ok   { color: var(--ok);   background: var(--ok-soft);   border-color: var(--ok-soft); }
.pill--info { color: var(--info); background: var(--info-soft); border-color: var(--info-soft); }
.pill--warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-soft); }
.pill--err  { color: var(--err);  background: var(--err-soft);  border-color: var(--err-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h-md);
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-base);
}

.btn--primary   { background: var(--primary); color: var(--text-on-primary); }
.btn--primary:hover  { background: var(--primary-glow); }
.btn--primary:active { background: var(--primary-deep); }

.btn--secondary { background: var(--surface-2); color: var(--text-1); border-color: var(--border); }
.btn--secondary:hover { color: var(--primary-text); border-color: var(--primary); }

.btn--ghost  { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-3); }

.btn--danger { background: var(--err); color: #FFFFFF; }

.btn--xs { height: var(--h-xs); padding: 0 var(--sp-3); font-size: var(--fs-12); border-radius: var(--r-sm); }
.btn--sm { height: var(--h-sm); padding: 0 var(--sp-4); font-size: var(--fs-13); border-radius: var(--r-sm); }
.btn--lg { height: var(--h-lg); padding: 0 var(--sp-6); font-size: var(--fs-16); border-radius: var(--r-lg); }

.input {
  width: 100%;
  height: var(--h-md);
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  transition: var(--transition-fast);
}

.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }