/* Design system Sắc Màu (cozy-code-library) — Material Design 3
 * Nguồn: github.com/kythuat1baobisacmau-eng/cozy-code-library, src/styles/m3-tokens.css + m3-base.css
 * App Quy Trình dùng CHUNG file này cho cả phần React (index.html) lẫn trang soạn (flowchart.html).
 * Chỉ lấy bảng màu SÁNG: trang A4 xuất PNG/PDF/Word phải luôn nền trắng nên app khoá chế độ sáng.
 * Colors and design tokens are based on Material Design 3 by Google.
 * Color algorithm: material-color-utilities — Copyright Google LLC, Apache License 2.0.
 */
:root {
  --md-sys-color-primary-palette-key-color: #0d4982;
  --md-sys-color-secondary-palette-key-color: #fed402;
  --md-sys-color-tertiary-palette-key-color: #15aa5a;
  --md-sys-color-neutral-palette-key-color: #75777d;
  --md-sys-color-neutral-variant-palette-key-color: #73777f;
  --md-sys-color-background: #f8f9ff;
  --md-sys-color-on-background: #191c20;
  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-surface-dim: #d9dae0;
  --md-sys-color-surface-bright: #f8f9ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f3fa;
  --md-sys-color-surface-container: #ededf4;
  --md-sys-color-surface-container-high: #e7e8ee;
  --md-sys-color-surface-container-highest: #e1e2e9;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-surface-variant: #dfe2eb;
  --md-sys-color-on-surface-variant: #43474e;
  --md-sys-color-inverse-surface: #2e3035;
  --md-sys-color-inverse-on-surface: #eff0f7;
  --md-sys-color-outline: #73777f;
  --md-sys-color-outline-variant: #c3c6cf;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #2e609a;
  --md-sys-color-primary: #2e609a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d4e3ff;
  --md-sys-color-on-primary-container: #0a4881;
  --md-sys-color-inverse-primary: #a4c9ff;
  --md-sys-color-secondary: #705d00;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffe174;
  --md-sys-color-on-secondary-container: #554500;
  --md-sys-color-tertiary: #006d36;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #7afca2;
  --md-sys-color-on-tertiary-container: #005227;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-primary-fixed: #d4e3ff;
  --md-sys-color-primary-fixed-dim: #a4c9ff;
  --md-sys-color-on-primary-fixed: #001c39;
  --md-sys-color-on-primary-fixed-variant: #0a4881;
  --md-sys-color-secondary-fixed: #ffe174;
  --md-sys-color-secondary-fixed-dim: #eac300;
  --md-sys-color-on-secondary-fixed: #221b00;
  --md-sys-color-on-secondary-fixed-variant: #554500;
  --md-sys-color-tertiary-fixed: #7afca2;
  --md-sys-color-tertiary-fixed-dim: #5cdf88;
  --md-sys-color-on-tertiary-fixed: #00210c;
  --md-sys-color-on-tertiary-fixed-variant: #005227;
}

/* Material Design 3 — token tĩnh: typography, shape, elevation, motion, state layer
 * Chép từ spec m3.material.io (CC BY 4.0, Google). Không đổi theo màu gốc.
 * Dùng kèm m3-tokens.css (phần màu, sinh tự động).
 */

:root {
  /* ---------- Typeface ---------- */
  --md-ref-typeface-brand: Roboto, "Segoe UI", system-ui, sans-serif;
  --md-ref-typeface-plain: Roboto, "Segoe UI", system-ui, sans-serif;

  /* ---------- Type scale ---------- */
  /* display */
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-tracking: -0.25px;
  --md-sys-typescale-display-large-weight: 400;

  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-tracking: 0px;
  --md-sys-typescale-display-medium-weight: 400;

  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-tracking: 0px;
  --md-sys-typescale-display-small-weight: 400;

  /* headline */
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-tracking: 0px;
  --md-sys-typescale-headline-large-weight: 400;

  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-tracking: 0px;
  --md-sys-typescale-headline-medium-weight: 400;

  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-tracking: 0px;
  --md-sys-typescale-headline-small-weight: 400;

  /* title */
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-tracking: 0px;
  --md-sys-typescale-title-large-weight: 400;

  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-medium-weight: 500;

  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-tracking: 0.1px;
  --md-sys-typescale-title-small-weight: 500;

  /* body */
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-tracking: 0.5px;
  --md-sys-typescale-body-large-weight: 400;

  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-body-medium-weight: 400;

  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-tracking: 0.4px;
  --md-sys-typescale-body-small-weight: 400;

  /* reading — vai trò BỔ SUNG của Sắc Màu, không có trong spec M3.
     Cho thân bài dài (wiki, tài liệu): thang M3 lớn nhất 16px giãn dòng 1,5
     hơi chật cho tiếng Việt vì dấu nằm cả trên lẫn dưới chữ. */
  --md-sys-typescale-reading-size: 17px;
  --md-sys-typescale-reading-line-height: 28px;
  --md-sys-typescale-reading-tracking: 0px;
  --md-sys-typescale-reading-weight: 400;

  /* label */
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-large-weight: 500;

  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  --md-sys-typescale-label-medium-weight: 500;

  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-tracking: 0.5px;
  --md-sys-typescale-label-small-weight: 500;

  /* ---------- Shape (bo góc) ---------- */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;       /* M3 Expressive — xem ghi chú */
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px; /* M3 Expressive — xem ghi chú */
  --md-sys-shape-corner-extra-extra-large: 48px;     /* M3 Expressive — xem ghi chú */
  /* Ghi chú: 3 giá trị "M3 Expressive" ở trên KHÔNG có trong bộ token v0_192 của
     material-web (bộ đó dừng ở 7 giá trị gốc). Nếu dự án cần dùng, đối chiếu lại
     với spec Expressive mới nhất trước khi chốt. 7 giá trị còn lại đã đối chiếu khớp. */
  --md-sys-shape-corner-full: 9999px;

  /* ---------- Elevation (đổ bóng) ---------- */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px 0px rgb(0 0 0 / 0.30), 0px 1px 3px 1px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgb(0 0 0 / 0.30), 0px 2px 6px 2px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level3: 0px 1px 3px 0px rgb(0 0 0 / 0.30), 0px 4px 8px 3px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level4: 0px 2px 3px 0px rgb(0 0 0 / 0.30), 0px 6px 10px 4px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level5: 0px 4px 4px 0px rgb(0 0 0 / 0.30), 0px 8px 12px 6px rgb(0 0 0 / 0.15);

  /* ---------- State layer (lớp phủ khi hover/nhấn) ---------- */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.10;
  --md-sys-state-pressed-opacity: 0.10;
  --md-sys-state-dragged-opacity: 0.16;

  /* ---------- Motion: easing ---------- */
  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Motion: duration ---------- */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;
}

/* ---------- Class tiện dụng cho type scale ----------
 * Không đặt margin trong các class này: chúng nằm ngoài @layer nên thắng mọi
 * tiện ích Tailwind — "margin: 0" từng nuốt mất mt-3, mb-2… đặt cùng phần tử.
 * Preflight của Tailwind đã xoá margin mặc định của h1–h6, p rồi. */
/* Display và headline dùng typeface thương hiệu theo spec M3. */
.md-display-large,
.md-display-medium,
.md-display-small,
.md-headline-large,
.md-headline-medium,
.md-headline-small {
  font-family: var(--md-ref-typeface-brand);
}

/* Title, body và label dùng typeface plain. */
.md-title-large,
.md-title-medium,
.md-title-small,
.md-body-large,
.md-body-medium,
.md-body-small,
.md-label-large,
.md-label-medium,
.md-label-small {
  font-family: var(--md-ref-typeface-plain);
}


.md-display-large  { font-size: var(--md-sys-typescale-display-large-size);  line-height: var(--md-sys-typescale-display-large-line-height);  letter-spacing: var(--md-sys-typescale-display-large-tracking);  font-weight: var(--md-sys-typescale-display-large-weight); }
.md-display-medium { font-size: var(--md-sys-typescale-display-medium-size); line-height: var(--md-sys-typescale-display-medium-line-height); letter-spacing: var(--md-sys-typescale-display-medium-tracking); font-weight: var(--md-sys-typescale-display-medium-weight); }
.md-display-small  { font-size: var(--md-sys-typescale-display-small-size);  line-height: var(--md-sys-typescale-display-small-line-height);  letter-spacing: var(--md-sys-typescale-display-small-tracking);  font-weight: var(--md-sys-typescale-display-small-weight); }
.md-headline-large  { font-size: var(--md-sys-typescale-headline-large-size);  line-height: var(--md-sys-typescale-headline-large-line-height);  letter-spacing: var(--md-sys-typescale-headline-large-tracking);  font-weight: var(--md-sys-typescale-headline-large-weight); }
.md-headline-medium { font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line-height); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); font-weight: var(--md-sys-typescale-headline-medium-weight); }
.md-headline-small  { font-size: var(--md-sys-typescale-headline-small-size);  line-height: var(--md-sys-typescale-headline-small-line-height);  letter-spacing: var(--md-sys-typescale-headline-small-tracking);  font-weight: var(--md-sys-typescale-headline-small-weight); }
.md-title-large  { font-size: var(--md-sys-typescale-title-large-size);  line-height: var(--md-sys-typescale-title-large-line-height);  letter-spacing: var(--md-sys-typescale-title-large-tracking);  font-weight: var(--md-sys-typescale-title-large-weight); }
.md-title-medium { font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: var(--md-sys-typescale-title-medium-weight); }
.md-title-small  { font-size: var(--md-sys-typescale-title-small-size);  line-height: var(--md-sys-typescale-title-small-line-height);  letter-spacing: var(--md-sys-typescale-title-small-tracking);  font-weight: var(--md-sys-typescale-title-small-weight); }
.md-body-large  { font-size: var(--md-sys-typescale-body-large-size);  line-height: var(--md-sys-typescale-body-large-line-height);  letter-spacing: var(--md-sys-typescale-body-large-tracking);  font-weight: var(--md-sys-typescale-body-large-weight); }
.md-body-medium { font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); letter-spacing: var(--md-sys-typescale-body-medium-tracking); font-weight: var(--md-sys-typescale-body-medium-weight); }
.md-body-small  { font-size: var(--md-sys-typescale-body-small-size);  line-height: var(--md-sys-typescale-body-small-line-height);  letter-spacing: var(--md-sys-typescale-body-small-tracking);  font-weight: var(--md-sys-typescale-body-small-weight); }
.md-label-large  { font-size: var(--md-sys-typescale-label-large-size);  line-height: var(--md-sys-typescale-label-large-line-height);  letter-spacing: var(--md-sys-typescale-label-large-tracking);  font-weight: var(--md-sys-typescale-label-large-weight); }
.md-label-medium { font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line-height); letter-spacing: var(--md-sys-typescale-label-medium-tracking); font-weight: var(--md-sys-typescale-label-medium-weight); }
.md-label-small  { font-size: var(--md-sys-typescale-label-small-size);  line-height: var(--md-sys-typescale-label-small-line-height);  letter-spacing: var(--md-sys-typescale-label-small-tracking);  font-weight: var(--md-sys-typescale-label-small-weight); }