/* =========================================================================
   JK UI — Design tokens
   Nguon: UI-UX/ghibli-iptv-design-spec.md (muc 2)
   3 theme: light (kem) / dark (rung dem) / forest (xanh reu sang)
   Khong hard-code mau trong component — chi dung bien o day.
   ========================================================================= */

:root {
  /* ---- Brand (giu nguyen o ca 3 theme) ---- */
  --brand-50:  #E9F2E1;
  --brand-100: #CFE3C6;
  --brand-300: #A8C5A0;
  --brand-600: #688F71;
  --brand-900: #3A5A40;

  --accent-peach:    #FFD7A5;
  --accent-orange:   #FFB870;
  --accent-blue:     #8BC5FC;
  --accent-lavender: #B9A7E6;
  --accent-coral:    #FF6CA5;

  /* ---- Semantic ---- */
  --ok:    #4E8A5B;
  --warn:  #C98A2E;
  --danger:#C4553F;
  --info:  #4B87B8;

  /* ---- Type ---- */
  --font-display: "Playfair Display", "Hiragino Mincho ProN", serif;
  --font-body: "Noto Sans JP", "Noto Sans KR", "Hiragino Sans", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* [2026-08-25] Nang thang chu len mot nac (~+9%) vi co chu cu qua nho, nhat la
     chu Nhat/Han (kanji 11px rat kho doc). TEN token giu nguyen de khong phai
     sua 3 file CSS + 69 blade; gia tri moi ghi o cot phai. */
  --fs-11: 12px;  --fs-12: 13px;  --fs-13: 14px;  --fs-14: 15px;
  --fs-15: 16px;  --fs-16: 17px;  --fs-18: 19px;  --fs-20: 22px;
  --fs-24: 26px;  --fs-28: 30px;  --fs-34: 37px;  --fs-44: 48px;

  /* ---- Shape ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* ---- Spacing ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Shell ---- */
  --sidebar-w: 268px;
  --topbar-h: 78px;
  --content-max: 1680px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 380ms;

  --z-drawer: 70;
  --z-topbar: 40;
  --z-modal: 120;
  --z-toast: 140;
}

/* ============================ LIGHT (mac dinh) ============================ */
:root,
[data-theme="light"] {
  --bg:          #F9F1DE;
  --bg-sidebar:  #FDF6E9;
  --bg-card:     #FDF4E7;
  --bg-card-2:   #F5EBD9;
  --bg-inset:    #F1E6D2;
  --bg-hover:    #EFE4CE;

  /* Duong vien: cu 1.27:1 so voi nen — gan nhu khong thay. Nang len ~1.6:1. */
  --line:        #D2BE9A;
  --line-soft:   #DFCDAD;

  --tx:          #2A2420;
  --tx-2:        #5F5548;   /* 6.5:1  (cu #6A5F52 = 5.5) */
  --tx-3:        #736858;   /* 4.6:1  (cu #948878 = 2.9 — truot WCAG AA) */
  --tx-invert:   #FDF6E9;

  --accent:      var(--brand-900);
  --accent-tx:   #FDF6E9;
  --accent-soft: var(--brand-100);
  --accent-soft-tx: var(--brand-900);
  --ring:        rgba(58,90,64,.35);

  --shadow-1: 0 1px 2px rgba(66,54,36,.06), 0 2px 8px rgba(66,54,36,.05);
  --shadow-2: 0 4px 14px rgba(66,54,36,.09);
  --shadow-3: 0 14px 40px rgba(66,54,36,.14);

  --scrim: rgba(42,36,32,.45);
  --skeleton: linear-gradient(90deg, #F1E6D2 25%, #F8F0E1 37%, #F1E6D2 63%);
  color-scheme: light;
}

/* ============================ FOREST (Ghibli Green) ====================== */
[data-theme="forest"] {
  --bg:          #E9F2E1;
  --bg-sidebar:  #F2F8EC;
  --bg-card:     #F6FAF0;
  --bg-card-2:   #E5EFDC;
  --bg-inset:    #DFEAD4;
  --bg-hover:    #DAE8CE;

  --line:        #A9C698;
  --line-soft:   #BFD6B0;

  --tx:          #22301C;
  --tx-2:        #465B41;   /* 6.4:1  (cu #4E6349 = 5.7) */
  --tx-3:        #576C51;   /* 4.7:1  (cu #7A9074 = 2.9 — truot WCAG AA) */
  --tx-invert:   #F2F8EC;

  --accent:      var(--brand-900);
  --accent-tx:   #F2F8EC;
  --accent-soft: var(--brand-100);
  --accent-soft-tx: var(--brand-900);
  --ring:        rgba(58,90,64,.38);

  --shadow-1: 0 1px 2px rgba(34,48,28,.06), 0 2px 8px rgba(34,48,28,.05);
  --shadow-2: 0 4px 14px rgba(34,48,28,.10);
  --shadow-3: 0 14px 40px rgba(34,48,28,.16);

  --scrim: rgba(24,38,20,.45);
  --skeleton: linear-gradient(90deg, #DFEAD4 25%, #EEF6E7 37%, #DFEAD4 63%);
  color-scheme: light;
}

/* ============================ DARK ====================================== */
[data-theme="dark"] {
  --bg:          #1B2F2F;
  --bg-sidebar:  #11272B;
  --bg-card:     #1F3130;
  --bg-card-2:   #243836;
  --bg-inset:    #182B2C;
  --bg-hover:    #2A403D;

  --line:        #3B5654;
  --line-soft:   #324B49;

  --tx:          #F5F0E6;
  --tx-2:        #BFC9BC;
  --tx-3:        #9AAA9B;   /* 5.1:1  (cu #8B9A8C = 4.2 tren card-2) */
  --tx-invert:   #11272B;

  --accent:      var(--brand-300);
  --accent-tx:   #11272B;
  --accent-soft: rgba(168,197,160,.16);
  --accent-soft-tx: var(--brand-300);
  --ring:        rgba(168,197,160,.40);

  --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.22);
  --shadow-2: 0 6px 18px rgba(0,0,0,.32);
  --shadow-3: 0 18px 46px rgba(0,0,0,.44);

  --scrim: rgba(6,16,16,.62);
  --skeleton: linear-gradient(90deg, #243836 25%, #2E4645 37%, #243836 63%);
  color-scheme: dark;
}

/* ================== SELLER PORTAL — accent rieng (teal) ================== */
/* Dat cuoi file de thang do uu tien so voi block theme o tren. */
[data-portal="seller"] {
  --accent:         #2F6B6E;
  --accent-tx:      #F2F8F7;
  --accent-soft:    #CFE6E4;
  --accent-soft-tx: #21585B;
  --ring:           rgba(47,107,110,.35);
}
[data-portal="seller"][data-theme="dark"] {
  --accent:         #7FC4C0;
  --accent-tx:      #0E2426;
  --accent-soft:    rgba(127,196,192,.16);
  --accent-soft-tx: #7FC4C0;
  --ring:           rgba(127,196,192,.42);
}
[data-portal="seller"][data-theme="forest"] {
  --accent:         #2F6B6E;
  --accent-tx:      #F2F8F7;
  --accent-soft:    #CBE7E3;
  --accent-soft-tx: #1F5457;
  --ring:           rgba(47,107,110,.38);
}