/* SINH TỰ ĐỘNG bởi tools/build-tokens.mjs từ bộ tiêu chuẩn COGA — không sửa tay.
   Sửa rule ở tiêu chuẩn rồi chạy lại script. */

/* 1.COGA_LAYOUT.md */
:root {
  --header-height: 4rem;
  --tabbar-height: 3rem;
  --sidebar-width-expanded: 15rem;
  --sidebar-width-collapsed: 4rem;
  --list-panel-width: 22.5rem;
  --scroll-extra: 0rem;
  --scroll-offset: calc(var(--header-height) + var(--tabbar-height) + var(--space-lg) + var(--scroll-extra));
  --footer-height: 2.5rem;

  --z-content: 0;
  --z-fixed: 10;
  --z-sidebar: 20;
  --z-drawer: 40;
  --z-modal: 50;
  --z-dropdown: 55;
  --z-toast: 60;
  --z-skip: 70;

  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1rem;
  --space-xl: 1.5rem; --space-2xl: 2rem; --space-3xl: 3rem; --space-4xl: 4rem;
  --container-max-width: 80rem; --container-padding-mobile: 1rem;
  --grid-columns-desktop: 12; --grid-gutter-desktop: 1.5rem;
  --grid-columns-mobile: 4; --grid-gutter-mobile: 1rem;
}

/* 1.COGA_LAYOUT.md */
:root {
  --breakpoint-mobile: 768px;
  --min-viewport-width: 320px;
  --touch-target-min: 3rem;
}

/* 2.COGA_COLOR.md */
:root {
  --brand-navy: #0f2a44;
  --brand-orange: #e67e22;
  --brand-orange-text: #c2410c;

  --background: #f0f4f8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-placeholder: #66768d;
  --border: #e2e8f0;
  --border-control: #7c8ba1;
  --focus: #2563eb;
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --accent-purple: #7c3aed;

  --sidebar-bg: #1e3a5f;
  --sidebar-text: #f8fafc;
  --sidebar-text-secondary: #cbd5e1;
  --sidebar-hover: color-mix(in srgb, var(--sidebar-bg), white 6%);
  --sidebar-active: color-mix(in srgb, var(--sidebar-bg), black 20%);
  --sidebar-border: color-mix(in srgb, var(--sidebar-bg), white 16%);
  --sidebar-focus: #38bdf8;

  --primary: var(--brand-navy);
  --on-primary: #ffffff;
  --state-mix: black;
  --danger: #b91c1c;
  --on-danger: #ffffff;

  --success: #16a34a; --success-text: #15803d;
  --warning: #d97706; --warning-text: #b45309;
  --error: #dc2626;   --error-text: #b91c1c;
  --info: #0891b2;    --info-text: #0e7490;
}

[data-theme="dark"] {
  --brand-orange-text: #e67e22;

  --background: #111827;
  --surface: #111827;
  --surface-raised: #1f2937;
  --surface-muted: #273549;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-placeholder: #75859c;
  --border: #334155;
  --border-control: #64748b;
  --focus: #38bdf8;
  --link: #38bdf8;
  --link-hover: #7dd3fc;

  --sidebar-bg: #080d18;
  --sidebar-hover: var(--surface-muted);
  --sidebar-active: var(--surface-muted);
  --sidebar-border: var(--border);

  --primary: var(--brand-orange);
  --on-primary: var(--brand-navy);
  --state-mix: white;

  --success: #22c55e; --success-text: #22c55e;
  --warning: #f59e0b; --warning-text: #f59e0b;
  --error: #f87171;   --error-text: #f87171;
  --info: #22d3ee;    --info-text: #22d3ee;
}

/* 3.COGA_FONTTEXT.md */
html { font-size: 100%; } /* 1rem = 16px; đổi bằng Cài đặt > Cỡ chữ */

:root {
  --font-sans: "Be Vietnam Pro", Inter, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --tracking-heading: -0.025em;
  --tracking-body: 0;

  --display-xl: var(--font-extrabold) 3rem/3.5rem var(--font-sans);
  --display-lg: var(--font-extrabold) 2.5rem/3rem var(--font-sans);
  --heading-1: var(--font-bold) 2.25rem/2.75rem var(--font-sans);
  --heading-2: var(--font-bold) 1.875rem/2.375rem var(--font-sans);
  --heading-3: var(--font-bold) 1.5rem/2rem var(--font-sans);
  --heading-4: var(--font-bold) 1.25rem/1.75rem var(--font-sans);
  --body-lg: var(--font-regular) 1.125rem/1.75rem var(--font-sans);
  --body-md: var(--font-regular) 1rem/1.5rem var(--font-sans);
  --body-sm: var(--font-regular) 0.875rem/1.25rem var(--font-sans);
  --label: var(--font-semibold) 0.875rem/1.25rem var(--font-sans);
  --button: var(--font-semibold) 0.875rem/1.25rem var(--font-sans);
  --caption: var(--font-medium) 0.75rem/1rem var(--font-sans);
  --code: var(--font-medium) 0.8125rem/1.25rem var(--font-mono);
}

/* Mobile <768px (khớp 1.COGA_LAYOUT.md Mục 2); media query không đọc được var() */
@media (max-width: 767px) {
  :root {
    --display-xl: var(--font-extrabold) 2.25rem/2.75rem var(--font-sans);
    --display-lg: var(--font-extrabold) 2rem/2.5rem var(--font-sans);
    --heading-1: var(--font-bold) 1.875rem/2.5rem var(--font-sans);
    --heading-2: var(--font-bold) 1.625rem/2.125rem var(--font-sans);
    --heading-3: var(--font-bold) 1.375rem/1.875rem var(--font-sans);
    --body-lg: var(--font-regular) 1.0625rem/1.625rem var(--font-sans);
  }
}

/* Tiếng Nhật: font riêng, không letter-spacing âm, xuống dòng theo quy tắc chữ Nhật */
:root:lang(ja) {
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, "Be Vietnam Pro", Inter,
    system-ui, sans-serif;
  --tracking-heading: 0;
  line-break: strict;
}

/* 4.COGA_COMPONENT.md */
:root {
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-stroke: 1.5;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 0.0625rem 0.125rem rgba(0,0,0,0.06), 0 0.0625rem 0.1875rem rgba(0,0,0,0.1);
  --shadow-md: 0 0.25rem 0.375rem rgba(0,0,0,0.1), 0 0.125rem 0.25rem rgba(0,0,0,0.06);
  --shadow-lg: 0 0.625rem 0.9375rem rgba(0,0,0,0.1), 0 0.25rem 0.375rem rgba(0,0,0,0.05);

  --image-ratio-thumbnail: 4 / 3;
  --image-ratio-avatar: 1 / 1;
}

/* 4.COGA_COMPONENT.md */
:root {
  --logo-height: 3rem;
  --logo-round-size: 2.5rem;
  --banner-dashboard-height: 10rem;
}

/* 8.COGA_QUALITY.md */
:root {
  --transition-duration: 180ms;
  --transition-ease-out: ease-out;
  --transition-ease-in: ease-in;
  --disabled-opacity: 0.4;
  --active-scale: 0.98;
  --hover-mix: 10%;
  --active-mix: 20%;
  --select-mix: 12%;
  --select-hover-mix: 18%;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition-duration: 0ms; --active-scale: 1; }
}