/* ============================================================================
   tanro — Design tokens
   Mặc định là giao diện tối; giao diện sáng là biến thể, không phải chiều ngược
   lại. Mọi màu / khoảng cách / kiểu chữ khai báo ở đây, file khác chỉ dùng biến.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* ---- Chữ ---------------------------------------------------------- */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
  --fs-xl:   clamp(1.25rem, 0.6vw + 1.12rem, 1.625rem);
  --fs-2xl:  clamp(1.5rem, 1.1vw + 1.25rem, 2.125rem);
  --fs-3xl:  clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
  --fs-4xl:  clamp(2.15rem, 2.4vw + 1.5rem, 3.25rem);

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-body:  1.7;

  --tracking-tight: -0.025em;
  --tracking-caps:   0.1em;

  /* ---- Nền / chữ (tối — mặc định) ------------------------------------ */
  --bg:        #0a0d0c;
  --bg-soft:   #0f1412;
  --bg-elev:   #141a18;
  --bg-raise:  #1a211e;
  --bg-sunken: #070908;
  --bg-invert: #f4f7f5;

  --ink:    #f2f6f4;
  --ink-2:  #b9c4bf;
  --ink-3:  #7f8c87;
  --ink-4:  #58635f;
  --ink-on-invert: #0a0d0c;

  --line:        #222b27;
  --line-strong: #313b36;

  /* ---- Thương hiệu: xanh lá ------------------------------------------ */
  --brand:      #22c55e;
  --brand-lift: #4ade80;   /* bản sáng hơn, dùng cho chữ trên nền tối */
  --brand-deep: #15803d;
  --brand-soft: rgba(34, 197, 94, .14);
  --brand-fg:   #04140a;

  /* ---- Màu nhận diện chuyên mục -------------------------------------- */
  --c-sports:    #22c55e;
  --c-travel:    #38bdf8;
  --c-music:     #c084fc;
  --c-food:      #fb923c;
  --c-knowledge: #facc15;
  --c-discover:  #2dd4bf;
  --c-culture:   #f472b6;
  --c-tech:      #818cf8;

  /* .theme-<khoá> ghi đè --accent; mọi component đọc theo biến này */
  --accent: var(--brand);
  /* Không tính sẵn --accent-soft ở đây: biến khai báo tại :root sẽ chốt theo
     --accent của :root, nên thẻ ở mọi chuyên mục đều ra cùng một màu nền. Nơi
     cần thì viết thẳng color-mix(... var(--accent) ...) để nó tính theo phần
     tử đang vẽ. */

  /* ---- Bo góc --------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Đổ bóng -------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-sm: 0 2px 12px rgba(0, 0, 0, .45);
  --sh-md: 0 14px 38px -16px rgba(0, 0, 0, .75);
  --sh-lg: 0 30px 70px -24px rgba(0, 0, 0, .85);
  --sh-glow: 0 10px 34px -12px color-mix(in srgb, var(--accent) 60%, transparent);

  /* ---- Khoảng cách & layout ------------------------------------------- */
  --gap: clamp(.85rem, 1.4vw, 1.25rem);
  --pad-x: clamp(1rem, 4vw, 2.75rem);
  --section-y: clamp(2rem, 3.6vw, 3.25rem);
  --container: 1320px;
  --container-narrow: 760px;
  --header-h: 62px;

  /* ---- Chuyển động ---------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s;
  --t: .28s;
  --t-slow: .55s;

  --backdrop: rgba(10, 13, 12, .78);
  --glass: rgba(20, 26, 24, .62);
  --glass-line: rgba(255, 255, 255, .1);
}

/* --- Giao diện sáng: chỉ ghi đè token ---------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #ffffff;
  --bg-soft:   #f4f7f5;
  --bg-elev:   #ffffff;
  --bg-raise:  #ffffff;
  --bg-sunken: #e8ede9;
  --bg-invert: #0a0d0c;

  --ink:    #0d1512;
  --ink-2:  #46524d;
  --ink-3:  #75837d;
  --ink-4:  #a3aeaa;
  --ink-on-invert: #f4f7f5;

  --line:        #e2e8e4;
  --line-strong: #cbd5cf;

  --brand:      #16a34a;
  --brand-lift: #15803d;
  --brand-soft: rgba(22, 163, 74, .1);

  --c-sports:    #16a34a;
  --c-travel:    #0284c7;
  --c-music:     #9333ea;
  --c-food:      #ea580c;
  --c-knowledge: #ca8a04;
  --c-discover:  #0d9488;
  --c-culture:   #db2777;
  --c-tech:      #4f46e5;

  --sh-xs: 0 1px 2px rgba(13, 21, 18, .06);
  --sh-sm: 0 2px 10px rgba(13, 21, 18, .07);
  --sh-md: 0 12px 32px -14px rgba(13, 21, 18, .22);
  --sh-lg: 0 26px 60px -22px rgba(13, 21, 18, .3);

  --backdrop: rgba(255, 255, 255, .8);
  --glass: rgba(255, 255, 255, .72);
  --glass-line: rgba(13, 21, 18, .08);
}

/* Không bám theo prefers-color-scheme: nền tối là nhận diện của site, nền sáng
   chỉ bật khi người dùng tự bấm nút đổi (data-theme="light"). */

/* --- Bảng màu theo chuyên mục ------------------------------------------ */
.theme-sports    { --accent: var(--c-sports); }
.theme-travel    { --accent: var(--c-travel); }
.theme-music     { --accent: var(--c-music); }
.theme-food      { --accent: var(--c-food); }
.theme-knowledge { --accent: var(--c-knowledge); }
.theme-discover  { --accent: var(--c-discover); }
.theme-culture   { --accent: var(--c-culture); }
.theme-tech      { --accent: var(--c-tech); }