/* ============================================================
   Kim Trần Import Export — global design tokens.
   Enqueued FIRST (see functions.php). Every other kt- stylesheet
   reads these custom properties; nothing here reads anything else.

   Breakpoint token overrides live in kt-responsive.css.
   The prefers-reduced-motion token override lives in kt-motion.css.

   Mirror the colour/type values into Kadence → Global Settings so
   the block editor UI offers the same palette:
   Palette 1 #0B5F35 · 2 #0E7A44 · 3 #083F23 · 4 #C7A04C · 5 #F2ECE0 ·
   6 #EDE6D8 · 7 #E5DCCB · 8 #1D2A22 · 9 #4A5566
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
/* Phase 7 redesign: main typography moved from Be Vietnam Pro to Inter
   (see wordpress/FRONT-PAGE-CHANGELOG.md — Phase 7 entry). IBM Plex
   Mono is kept, but scoped down to genuinely tabular/technical contexts
   (spec-table figures, scientific names) rather than UI chrome like nav
   and section eyebrows, which now read in Inter.
   [TO VERIFY] self-host Inter + IBM Plex Mono woff2 via Kadence → Local
   Fonts once licence/hosting is confirmed; this CDN @import is the
   interim per README.md / handoff spec. */

:root{
  /* --- colour: duotone core --------------------------------- */
  --kt-green-900:#083F23;
  --kt-green-700:#0B5F35;
  --kt-green-500:#0E7A44;
  --kt-cream:#F2ECE0;
  --kt-cream-warm:#EDE6D8;
  --kt-cream-deep:#E5DCCB;
  --kt-paper:#FBF8F2;
  --kt-gold:#C7A04C;
  --kt-steel:#9BA3AE;
  --kt-ink:#1D2A22;
  --kt-slate:#4A5566;
  --kt-no:#B23A48;

  /* --- semantic ---------------------------------------------
     Phase 7: page background moved from the stronger --kt-cream to
     the near-white --kt-paper tone (previously card-only) — this is
     the single biggest lever for "too much beige" across the page.
     --kt-cream-warm now used sparingly (Journey section only) instead
     of banding three-plus sections; everywhere else relies on
     whitespace + a hairline top border to separate sections. */
  --kt-surface-page:var(--kt-paper);
  --kt-surface-alt:var(--kt-cream-warm);
  --kt-surface-card:var(--kt-paper);
  --kt-surface-dark:var(--kt-green-700);
  --kt-text-heading:var(--kt-green-700);
  --kt-text-body:var(--kt-ink);
  --kt-text-muted:var(--kt-slate);
  --kt-text-accent:var(--kt-gold);
  --kt-text-on-dark:var(--kt-cream);
  --kt-text-on-dark-muted:var(--kt-steel);
  --kt-border-hairline:var(--kt-cream-deep);
  --kt-border-on-dark:rgba(242,236,224,.16);
  --kt-scrim:linear-gradient(180deg,rgba(5,28,16,.40) 0%,rgba(5,28,16,.62) 100%);
  --kt-scrim-strong:linear-gradient(180deg,rgba(5,28,16,.55) 0%,rgba(5,28,16,.78) 100%);

  /* --- type ---------------------------------------------------
     Phase 7: sizes bumped a step across the board — the redesign
     brief called several sections "too small and weak." Letter-
     spacing on headings loosened slightly for Inter (which sits
     tighter than Be Vietnam Pro at the same tracking value). */
  --kt-font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --kt-font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --kt-fs-display:64px;
  --kt-fs-h2:38px;
  --kt-fs-h3:24px;
  --kt-fs-h4:18px;
  --kt-fs-lead:20px;
  --kt-fs-body:16px;
  --kt-fs-body-sm:15px;
  --kt-fs-caption:13px;
  --kt-fs-kicker:11px;
  --kt-fs-label:11.5px;
  --kt-fs-code:13px;
  --kt-ls-display:-.02em;
  --kt-ls-h2:-.015em;
  --kt-ls-kicker:.16em;
  --kt-ls-label:.1em;
  --kt-lh-h2:1.15;
  --kt-lh-lead:1.55;
  --kt-lh-caption:1.55;

  /* --- spacing / layout ------------------------------------- */
  --kt-sp-1:4px; --kt-sp-2:8px; --kt-sp-3:12px; --kt-sp-4:16px;
  --kt-sp-5:20px; --kt-sp-6:24px; --kt-sp-8:32px; --kt-sp-10:40px;
  --kt-sp-12:48px; --kt-sp-16:64px; --kt-sp-20:80px; --kt-sp-24:96px;
  --kt-container:1200px;
  --kt-pad:56px;
  --kt-pad-tablet:40px;
  --kt-pad-mobile:20px;
  --kt-section-y:96px;
  --kt-grid-gutter:24px;

  /* --- shape / depth --------------------------------------- */
  --kt-radius-xs:3px;
  --kt-radius-sm:6px;
  --kt-radius-md:10px;
  --kt-radius-lg:14px;
  --kt-radius-xl:20px;
  --kt-radius-pill:999px;
  --kt-notch:18px;
  --kt-hair:1.5px;
  --kt-dash:1.5px dashed;
  --kt-shadow-card:0 1px 2px rgba(8,63,35,.05);
  --kt-shadow-raised:0 10px 30px rgba(8,63,35,.10);
  --kt-blueprint:linear-gradient(rgba(11,95,53,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,95,53,.05) 1px,transparent 1px);
  --kt-blueprint-size:26px 26px;
  --kt-ticks:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 7px);

  /* --- motion ---------------------------------------------- */
  --kt-dur-fast:120ms;
  --kt-dur:200ms;
  --kt-dur-slow:420ms;
  --kt-ease:cubic-bezier(.22,.61,.36,1);
  --kt-ease-out:cubic-bezier(0,0,.2,1);
  --kt-reveal-rise:14px;
  --kt-press:.985;
}