/* ==========================================================================
   Tan Chi Thanh Plastic — design tokens
   Palette is logo-led: greens carry the structure, crown red is reserved for
   very small moments, gold is used only for rules and fine detail.
   Distribution target: 60% white / 20% warm neutral / 15% green / 5% accent.
   ========================================================================== */

:root {
  /* ---- brand greens ------------------------------------------------- */
  --g-900: #073E23;
  --g-800: #0B5D34;   /* deep green — hero overlays, footer               */
  --g-700: #0E6D39;   /* hover / active                                   */
  --g-600: #117A3E;   /* PRIMARY — buttons, links, key actions            */
  --g-500: #16954F;   /* bright — small highlights, icons                 */
  --g-300: #8FC3A4;
  --g-100: #D5E7DC;
  --g-050: #E8F1E8;   /* pale — section backgrounds                       */

  /* ---- accents (use sparingly) -------------------------------------- */
  --crown-red: #C8322F;   /* logo-linked, rare                            */
  --gold:      #C7C88A;   /* dividers, refined details                    */
  --gold-soft: #EBEBD6;

  /* ---- neutrals ------------------------------------------------------ */
  --ink:        #1F2A23;  /* headings, body                               */
  --ink-2:      #48544C;  /* secondary text                               */
  --ink-3:      #6E7A72;  /* meta, captions                               */
  --ink-4:      #9AA49E;  /* disabled, faint                              */
  --line:       #E2E7E2;
  --line-soft:  #EFF2EE;
  --warm:       #F7F8F3;  /* alternating sections                         */
  --white:      #FFFFFF;

  /* ---- semantic ------------------------------------------------------ */
  --bg:            var(--white);
  --bg-alt:        var(--warm);
  --bg-pale:       var(--g-050);
  --bg-deep:       var(--g-800);
  --text:          var(--ink);
  --text-muted:    var(--ink-2);
  --text-faint:    var(--ink-3);
  --border:        var(--line);
  --accent:        var(--g-600);
  --accent-hover:  var(--g-700);
  --on-deep:       #EAF3EC;
  --on-deep-muted: #A9C6B4;

  /* ---- typography ---------------------------------------------------- */
  --font-display: 'Archivo', 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display: clamp(2.5rem, 1.45rem + 3.50vw, 4.75rem);
  --fs-h1:      clamp(2.1rem, 1.42rem + 2.60vw, 3.85rem);
  --fs-h2:      clamp(1.75rem, 1.28rem + 1.85vw, 2.85rem);
  --fs-h3:      clamp(1.35rem, 1.08rem + 1.05vw, 1.95rem);
  --fs-h4:      clamp(1.10rem, 0.99rem + 0.45vw, 1.35rem);
  --fs-lead:    clamp(1.05rem, 0.97rem + 0.34vw, 1.30rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.78125rem;

  --lh-tight: 1.12;
  --lh-snug:  1.22;
  --lh-base:  1.68;

  --tr-display: -0.028em;
  --tr-head:    -0.018em;
  --tr-eyebrow:  0.16em;

  /* ---- spacing ------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;

  --section-y:    clamp(4.5rem, 2.6rem + 7.4vw, 9.5rem);
  --section-y-sm: clamp(3.25rem, 2.2rem + 4.2vw, 6rem);

  /* ---- layout -------------------------------------------------------- */
  --container:      1280px;
  --container-wide: 1560px;
  --container-text: 760px;
  --gutter: clamp(1.25rem, 0.55rem + 2.9vw, 3.5rem);
  --header-h: 84px;
  --header-h-sm: 66px;

  /* ---- radii & elevation --------------------------------------------- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 30px;
  --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(11,93,52,.05);
  --sh-sm: 0 2px 10px rgba(11,93,52,.06);
  --sh-md: 0 10px 30px -12px rgba(11,93,52,.18);
  --sh-lg: 0 26px 60px -22px rgba(11,93,52,.26);
  --sh-dock: 0 8px 30px -6px rgba(11,93,52,.30);

  /* ---- motion -------------------------------------------------------- */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 620ms;
  --t-reveal: 900ms;

  --z-dock: 60;
  --z-drawer: 90;
  --z-header: 95;   /* above the drawer: the burger doubles as its close button */
  --z-modal: 100;
}

/* Audit mode (?audit=1) — highlights every unverified field on screen. */
.audit [data-verify="false"] {
  outline: 2px dashed var(--crown-red);
  outline-offset: 2px;
  background: rgba(200, 50, 47, .05);
  border-radius: var(--r-xs);
}