/* ============================================================
   KIM LIEN GROUP — Color tokens
   Source: Quy Định Màu Sắc & Font (internal brand guideline).
   Palette = gold + dark + neutral. No semantic rainbow; navy/gold/
   silver carry every state. Gold is precious — never a flat fill
   across large surfaces.
   ============================================================ */

:root {
  /* ---------- BASE PALETTE ---------- */

  /* Primary — metallic gold, the brand's signature */
  --kl-gold: #e5a124;          /* Vàng ánh kim — primary */
  --kl-gold-soft: #d4a96a;     /* softer logo-tint gold (matches horizontal lockup) */
  --kl-gold-deep: #b08019;     /* darker gold for hover / press / contrast on white */

  /* Background — primary surfaces */
  --kl-bg-white: #ffffff;      /* Trắng */
  --kl-bg-blue: #122567;       /* Xanh — primary dark surface */

  /* Secondary neutrals */
  --kl-black: #000000;         /* Đen sang trọng */
  --kl-charcoal: #333333;      /* Xám đậm trung tính */

  /* Accents */
  --kl-silver: #8c8c8c;        /* Xám bạc */
  --kl-platinum: #f4f4f4;      /* Màu bạc — light tint surface */
  --kl-bronze: #b59a77;        /* Be ánh đồng */
  --kl-navy: #0a2a4a;          /* Xanh đậm */
  --kl-moss: #2c5f2d;          /* Xanh rêu đậm */

  /* ---------- SEMANTIC ALIASES ---------- */

  /* Foreground */
  --fg-1: var(--kl-black);             /* primary text on light */
  --fg-2: var(--kl-charcoal);          /* body text on light */
  --fg-3: var(--kl-silver);            /* muted / meta */
  --fg-on-dark: var(--kl-bg-white);    /* text on navy / blue */
  --fg-on-dark-2: #c9d1e8;             /* secondary text on dark */
  --fg-accent: var(--kl-gold);         /* gold for emphasis */

  /* Background */
  --bg-1: var(--kl-bg-white);
  --bg-2: var(--kl-platinum);
  --bg-dark: var(--kl-bg-blue);
  --bg-darker: var(--kl-navy);
  --bg-black: var(--kl-black);

  /* Lines & dividers */
  --line-1: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.16);
  --line-gold: var(--kl-gold);
  --line-on-dark: rgba(255, 255, 255, 0.16);
  --line-on-dark-gold: rgba(229, 161, 36, 0.5);

  /* Surfaces */
  --surface-card: var(--kl-bg-white);
  --surface-alt: var(--kl-platinum);
  --surface-reverse: var(--kl-bg-blue);

  /* Interaction (text/links/buttons) */
  --action: var(--kl-gold);
  --action-hover: var(--kl-gold-deep);
  --focus-ring: var(--kl-gold);
}