/* ==========================================================================
   tokens.css - Design token (CSS custom properties)
   QUY UOC QUAN TRONG: day la file DUY NHAT duoc phep chua ma mau hex.
   Moi file CSS khac chi duoc dung var(--ec-*). Neu can mau moi -> them token
   o day va cap nhat docs/DESIGN.md, khong hardcode hex trong component.
   Bang mau chot theo SPEC.md muc 1, khong tu doi.
   ========================================================================== */

:root {
  /* ---------- Mau thuong hieu (SPEC muc 1) ---------- */
  --ec-navy: #002060;   /* nen dai logo header, nen footer chinh, nen dropdown */
  --ec-blue: #1F4E79;   /* nen thanh nav, nen dai "Back to top" */
  --ec-green: #A9D18E;  /* chu "Circular" trong logo, accent tren nen toi */
  --ec-white: #FFFFFF;
  --ec-text: #222222;   /* chu body tren nen trang - 15.9:1 */
  --ec-meta: #767676;   /* ngay thang, breadcrumb nho - 4.54:1 tren trang */
  --ec-rule: #000000;   /* lop phu hero, vien dot slider, goc mau vien/surface */
  --ec-rule-line: #A6A6A6; /* duong ke ngang xam phan cach cac dai (F7 - White,Bg1,Darker35%) */

  /* ---------- Mau dan xuat (chi tu 7 mau tren) ---------- */
  --ec-bg: var(--ec-white);
  --ec-on-navy: var(--ec-white);
  --ec-on-blue: var(--ec-white);
  --ec-link: var(--ec-navy);          /* link tren nen sang: 15.3:1 */
  --ec-link-hover: var(--ec-blue);
  /* CANH BAO A11Y: --ec-green chi 1.8:1 tren nen trang.
     KHONG dung lam mau chu/icon tren nen sang. Chi dung tren navy/blue. */
  --ec-accent-on-dark: var(--ec-green);

  /* Vien & lop phu - dung color-mix de khong sinh hex moi */
  --ec-border: color-mix(in srgb, var(--ec-rule) 15%, transparent);
  --ec-border-strong: color-mix(in srgb, var(--ec-rule) 35%, transparent);
  --ec-border-on-navy: color-mix(in srgb, var(--ec-white) 22%, transparent);
  --ec-surface-alt: color-mix(in srgb, var(--ec-rule) 4%, var(--ec-white));
  --ec-overlay: color-mix(in srgb, var(--ec-rule) 62%, transparent);
  --ec-shade-hover: color-mix(in srgb, var(--ec-white) 12%, transparent);

  /* ---------- Font stack (SPEC muc 2 - copy nguyen van) ---------- */
  --ec-font-logo: "Comic Sans MS", "Comic Neue", cursive;
  --ec-font-ui: "Bahnschrift Condensed", "Barlow Condensed", "Roboto Condensed", sans-serif;
  --ec-font-body: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Thang chu ---------- */
  --ec-fs-logo-cap: 2rem;      /* chu dau "E" / "C" cua logo */
  --ec-fs-logo: 1.75rem;       /* cac chu con lai cua logo */
  --ec-fs-tagline: 1.05rem;
  --ec-fs-nav: 0.95rem;
  --ec-fs-foot-logo-cap: 1.05rem;
  --ec-fs-foot-logo: 0.9rem;
  --ec-fs-foot: 0.95rem;

  --ec-fs-xs: 0.75rem;    /* nhan category nho, chu thich anh */
  --ec-fs-sm: 0.85rem;    /* meta, ngay, breadcrumb */
  --ec-fs-base: 1rem;     /* body */
  --ec-fs-md: 1.05rem;
  --ec-fs-lg: 1.25rem;    /* tieu de post card cot giua */
  --ec-fs-xl: 1.5rem;     /* tieu de widget lon, tieu de trang */
  --ec-fs-2xl: 1.75rem;   /* tieu de single post */
  --ec-fs-3xl: 2.25rem;   /* tieu de trang category */

  --ec-lh-tight: 1.2;
  --ec-lh-snug: 1.35;
  --ec-lh-base: 1.6;

  /* ---------- Khoang cach (thang 4px) ---------- */
  --ec-space-1: 0.25rem;
  --ec-space-2: 0.5rem;
  --ec-space-3: 0.75rem;
  --ec-space-4: 1rem;
  --ec-space-5: 1.25rem;
  --ec-space-6: 1.5rem;
  --ec-space-8: 2rem;
  --ec-space-10: 2.5rem;   /* khoang cach giua cac dai ngang trang landing */
  --ec-space-12: 3rem;

  /* ---------- Layout ---------- */
  --ec-container: 1300px;      /* max-width khung noi dung (user chot 2026-07-27) */
  --ec-container-narrow: 820px;/* trang tinh 1 cot */
  --ec-gutter: 1.5rem;         /* padding le container */
  --ec-col-gap: 1.5rem;        /* khoang cach giua cac cot */
  --ec-col-left: 22%;   /* F8 - hai cot bien bang nhau */
  --ec-col-main: 56%;
  --ec-col-right: 22%;

  /* ---------- Duong ke / vien ---------- */
  --ec-rule-width: 1px;
  --ec-band-gap: var(--ec-space-10);

  /* ---------- Icon ---------- */
  --ec-icon: 20px;        /* icon social SVG inline 20x20 */
  --ec-icon-sm: 16px;

  /* ---------- Focus (a11y) ---------- */
  --ec-focus-width: 3px;
  --ec-focus-offset: 2px;
  --ec-focus-light: var(--ec-navy);   /* vong focus tren nen sang */
  --ec-focus-dark: var(--ec-green);   /* vong focus tren nen navy/blue */

  /* ---------- Chuyen dong (bi tat khi prefers-reduced-motion) ---------- */
  --ec-dur-fast: 120ms;
  --ec-dur: 250ms;
  --ec-ease: ease;

  /* ---------- Bo goc ---------- */
  --ec-radius: 0;      /* thiet ke goc vuong */
  --ec-radius-pill: 999px;

  /* ---------- Breakpoint (chi de tra cuu; media query khong doc bien) ----------
     --ec-bp-md: 768px   -> tu 768px: 2 cot
     --ec-bp-lg: 1024px  -> tu 1024px: 3 cot
     Duoi 768px: 1 cot + hamburger */
  --ec-bp-md: 768px;
  --ec-bp-lg: 1024px;
}

/* Du phong cho trinh duyet chua ho tro color-mix() */
@supports not (color: color-mix(in srgb, #000 10%, transparent)) {
  :root {
    --ec-border: rgba(0, 0, 0, 0.15);
    --ec-border-strong: rgba(0, 0, 0, 0.35);
    --ec-border-on-navy: rgba(255, 255, 255, 0.22);
    --ec-surface-alt: rgba(0, 0, 0, 0.04);
    --ec-overlay: rgba(0, 0, 0, 0.62);
    --ec-shade-hover: rgba(255, 255, 255, 0.12);
  }
}