/* VHHC Agritech Premium — design tokens, inlined from tokens/*.css (T-8, GĐ3 vòng 7, 17/09/2026: gộp 9 @import CSS thành 1 file, giảm request tuần tự). Thứ tự giữ nguyên như @import cũ. */

/* ---- tokens/fonts.css ---- */
/* Manrope — the locked VHHC typeface. Served from Google Fonts.
   Weights 400/500/600/700 only. 800+ is forbidden by the brand rules. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");
:root{--font-sans:"Manrope","Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,"SFMono-Regular","Menlo",monospace}

/* ---- tokens/colors.css ---- */
:root{
/* Base palette — Agritech Premium (locked) */
--color-primary:#123524;/* Deep Canopy */
--color-primary-hover:#0D281C;/* Forest Depth */
--color-secondary:#2E7D32;/* Agri Green */
--color-accent-growth:#B7E33A;/* Lime Harvest */
--color-accent-support:#7FD36B;/* Fresh Lift */
--color-accent-premium:#D8C56F;/* Dry Gold */
--color-accent-premium-light:#EEE1A4;
--color-surface:#F7F8F1;/* Clean Grain */
--color-surface-soft:#EAF3E3;/* Mint Air */
--color-neutral:#D8E0D1;/* Pale Moss */
--color-muted:#587062;/* Moss Grey */

/* Semantic surfaces */
--surface-page:var(--color-surface);
--surface-card:#FFFFFF;
--surface-card-soft:var(--color-surface-soft);
--surface-inverse:var(--color-primary);
--surface-inverse-deep:var(--color-primary-hover);
--surface-disabled:var(--color-neutral);

/* Semantic text */
--text-primary:#123524;
--text-secondary:#587062;
--text-inverse:#F7F8F1;
--text-on-accent:#123524;
--text-disabled:#8FA396;
--text-link:#123524;/* GĐ3 vòng 1, 17/09/2026: đổi từ Agri Green sang Deep Canopy — sửa cặp trượt AA 4.499 (§V1) */
--text-link-hover:#123524;

/* Borders & lines */
--border-subtle:#D8E0D1;
--border-strong:#123524;
--border-inverse:rgba(247,248,241,.22);
--divider-premium:var(--color-accent-premium);

/* Focus */
--focus-ring:rgba(183,227,58,.28);
--focus-ring-width:3px;

/* Status — derived from the palette, never neon */
--status-positive:#2E7D32;
--status-positive-soft:#EAF3E3;
--status-attention:#B08900;
--status-attention-soft:#F5EED4;
--status-critical:#8C2F23;
--status-critical-soft:#F4E4E1;
--status-info:#123524;
--status-info-soft:#E4EAE5;

/* Chart order — Deep Canopy → Agri Green → Fresh Lift → Lime Harvest → Dry Gold */
--chart-1:#123524;--chart-2:#2E7D32;--chart-3:#7FD36B;--chart-4:#B7E33A;--chart-5:#D8C56F;--chart-grid:#D8E0D1
}

/* ---- tokens/typography.css ---- */
:root{
/* Weights — 700 is the ceiling. Never 800/ExtraBold. */
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

/* Sizes — full type-scale modernization (GĐ2 Đợt 4, 17/09/2026,
   docs/ux/modernize-2026-09-17.md §3.1). Fluid clamp() replaces the old fixed
   sizes so every section heading reads at the same scale everywhere (one H2
   size site-wide) and shrinks smoothly on narrow viewports instead of
   jumping at a single breakpoint. --text-body-lg doubles as the "lead"
   paragraph size — apply it via the .u-text-lg utility (assets/css/main.css),
   not inline style, per the R1 refactor (17/09/2026). */
--text-display-lg:64px;--text-display:clamp(40px, 1.6rem + 3.2vw, 76px);--text-h1:clamp(36px, 1.5rem + 2.4vw, 60px);--text-h2:clamp(28px, 1.2rem + 1.6vw, 44px);--text-h3:clamp(20px, 1.1rem + .4vw, 24px);--text-h4:20px;
--text-body-lg:clamp(18px, 1rem + .35vw, 21px);--text-body:16px;--text-body-sm:15px;--text-caption:14px;--text-micro:12px;

/* Line heights */
--leading-display:1.04;--leading-heading:1.12;--leading-body:1.6;--leading-tight:1.3;--leading-caption:1.5;/* @kind font */

/* Tracking — logo +4 (0.04em at scale). -0.01em is reserved for sizes ≥40px
   (display, H1); H2/H3 dip below 40px on mobile so they stay at 0 (docs/ux/
   modernize-2026-09-17.md M1). Eyebrow/label tracking eased from .14em. */
--tracking-logo:.16em;--tracking-display:-.01em;--tracking-heading:0;--tracking-body:0;--tracking-eyebrow:.08em;/* @kind font */

/* Roles */
--type-display:var(--weight-bold) var(--text-display)/var(--leading-display) var(--font-sans);
--type-h1:var(--weight-bold) var(--text-h1)/var(--leading-heading) var(--font-sans);
--type-h2:var(--weight-semibold) var(--text-h2)/var(--leading-heading) var(--font-sans);
--type-h3:var(--weight-semibold) var(--text-h3)/var(--leading-tight) var(--font-sans);
--type-subheading:var(--weight-medium) var(--text-body-lg)/var(--leading-tight) var(--font-sans);
--type-body:var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans);
--type-caption:var(--weight-regular) var(--text-caption)/var(--leading-caption) var(--font-sans);
--type-eyebrow:var(--weight-semibold) var(--text-micro)/1.2 var(--font-sans)
}
@media (max-width: 640px) { :root { --text-body: 16px; } }

/* ---- tokens/spacing.css ---- */
:root{
/* 4px base scale */
--space-0:0;--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;--space-20:80px;--space-24:96px;--space-32:128px;

/* Layout — container capped at 1200px on every breakpoint (docs/ux/
   modernize-2026-09-17.md §3.2; the old 1440px-wide override in main.css is
   removed so content never stretches past ~1200px even on large monitors).
   Section rhythm: one fluid pad for normal sections, one tighter pad for
   "--sm" sections right under a page header (§3.3). */
--layout-max:1200px;--layout-gutter:clamp(20px, 5vw, 64px);
--section-pad-y:clamp(72px, 3rem + 5vw, 136px);--section-pad-y-sm:clamp(48px, 2rem + 3vw, 88px);
--control-h-sm:34px;--control-h:44px;--control-h-lg:52px;
--logo-clearspace:1em/* @kind spacing */
}

/* ---- tokens/radius.css ---- */
:root{--radius-none:0;--radius-xs:4px;--radius-sm:4px;--radius-md:8px;--radius-lg:8px;--radius-xl:12px;--radius-pill:999px;
/* 17/09/2026: gộp còn 4/8/12 theo hướng "combo 1, không vát góc" (docs/ux/implementation-plan-2026-09-17.md) */
--radius-control:var(--radius-sm);--radius-card:var(--radius-md);--radius-surface:var(--radius-xl);--radius-badge:var(--radius-pill)}

/* ---- tokens/elevation.css ---- */
:root{
/* Shadows are green-tinted, low-opacity and shallow — premium restraint, never a soft "SaaS glow". */
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(18,53,36,.06);
--shadow-sm:0 2px 6px rgba(18,53,36,.07);
--shadow-md:0 6px 20px rgba(18,53,36,.09);
--shadow-lg:0 18px 48px rgba(18,53,36,.12);
--shadow-inset-line:inset 0 -1px 0 var(--border-subtle);
/* 17/09/2026: viền Deep Canopy 2px + vầng Lime, thay ring lime đơn (tương phản thấp) — implementation-plan-2026-09-17.md */
--shadow-focus:0 0 0 2px var(--color-primary),0 0 0 5px var(--focus-ring);
/* --blur-veil / --veil-light removed (GĐ2 Đợt 4, 17/09/2026) — the navbar's
   translucent+blur veil was replaced with a solid background (§3.7); no
   other rule used them. */
--veil-dark:rgba(18,53,36,.72)/* @kind color */}

/* ---- tokens/motion.css ---- */
:root{
/* Calm, short, no bounce. Nothing overshoots. All motion tokens: @kind other */
--ease-standard:cubic-bezier(.2,0,.2,1);/* @kind other */
--ease-out:cubic-bezier(0,0,.2,1);/* @kind other */
--ease-in:cubic-bezier(.4,0,1,1);/* @kind other */
--duration-instant:80ms;/* @kind other */
--duration-fast:180ms;/* @kind other, 17/09/2026: 150-200ms cho hover/focus nút & ô nhập */
--duration-base:220ms;/* @kind other */
--duration-slow:360ms;/* @kind other */
--duration-reveal:520ms;/* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);/* @kind other */
--transition-surface:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard);/* @kind other */
--press-scale:.985/* @kind other */}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- tokens/gradients.css ---- */
:root{
/* The only four approved gradients. No neon, no rainbow, no glow. */
--gradient-agritech-hero:linear-gradient(135deg,#123524 0%,#2E7D32 62%,#B7E33A 100%);/* @kind other */
--gradient-fresh-surface:linear-gradient(180deg,#EAF3E3 0%,#F7F8F1 100%);/* @kind other */
--gradient-premium-growth:linear-gradient(120deg,#123524 0%,#7FD36B 100%);/* @kind other */
--gradient-gold-trust:linear-gradient(90deg,#D8C56F 0%,#EEE1A4 100%);/* @kind other */
/* Protection gradient for text over imagery */
--gradient-protect-bottom:linear-gradient(180deg,rgba(18,53,36,0) 0%,rgba(18,53,36,.78) 100%);/* @kind other */
--gradient-protect-left:linear-gradient(90deg,rgba(18,53,36,.86) 0%,rgba(18,53,36,0) 70%);/* @kind other */
}

/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p{margin:0}
/* GĐ3 vòng 1, 17/09/2026 (§V1): link không được chỉ dựa vào màu — gạch chân mặc định,
   không chỉ khi hover. Các thành phần điều hướng/chip (nav, footer list, breadcrumb,
   bảng, nút…) tự tắt gạch chân riêng trong main.css vì đã có cách chỉ báo khác. */
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
::selection{background:var(--color-accent-growth);color:var(--color-primary)}