/* ============================================================
   Lura Design System — tokens.css
   Nguồn: Figma "Lura" (fileKey qhTKkhxk8KmlwwoE7Hbve0)
   Đọc qua Figma MCP (get_variable_defs + get_design_context)
   — KHÔNG tự thêm giá trị nào không có trong source.

   Tên biến CSS = tên variable Figma chuyển kebab-case 1:1,
   ví dụ Color/Background/Active/Accent/Solid
      → --color-background-active-accent-solid

   Lura là DS **dark-only**: nền màn = Color/Background/Container
   (#19191b) — đã ĐO bằng pixel screenshot cả 6 section, không
   màn nào đảo ngược ([PIPE-14]).

   Loại trừ (rác kit ngoài, không đưa vào hệ thống):
   - Schemes/On Surface, M3/sys/light/on-surface  (Material 3 sót lại)
   ============================================================ */

:root {
  /* ---------- PRIMITIVE — dimension scale (zen-dm) ---------- */
  --zen-dm-4: 4px;
  --zen-dm-8: 8px;
  --zen-dm-12: 12px;
  --zen-dm-16: 16px;
  --zen-dm-20: 20px;
  --zen-dm-24: 24px;
  --zen-dm-28: 28px;
  --zen-dm-32: 32px;

  /* ---------- PRIMITIVE — palette ---------- */
  --white: #ffffff;
  --black: #000000;

  /* ---------- TYPOGRAPHY ---------- */
  --typography-font-family-heading: "Bricolage Grotesque";
  --typography-font-family-button: "Bricolage Grotesque";
  --typography-font-family-sans: "Inter";
  --emphasis-font-weight-regular: 400;
  --emphasis-font-weight-medium: 500;
  --emphasis-font-weight-bold: 600;

  --typography-font-size-heading-3: 24px;
  --typography-line-height-heading-3: 32px;
  --typography-letter-spacing-heading-3: -0.84px;

  --typography-font-size-heading-4: 20px;
  --typography-line-height-heading-4: 28px;
  --typography-letter-spacing-heading-4: -0.72px;

  --typography-font-size-subheading: 18px;
  --typography-line-height-subheading: 26px;
  --typography-letter-spacing-subheading: -0.6px;

  --typography-font-size-body-extra: 16px;
  --typography-line-height-body-extra: 24px;
  --typography-letter-spacing-body-extra: -0.36px;

  --typography-font-size-body-base: 14px;
  --typography-line-height-body-base: 20px;
  --typography-letter-spacing-body-base: -0.32px;

  --typography-font-size-caption: 10px;
  --typography-line-height-caption: 16px;
  --typography-letter-spacing-caption: -0.12px;

  --typography-font-size-body-small: 12px;
  --typography-line-height-body-small: 16px;
  --typography-letter-spacing-body-small: -0.28px;

  --typography-font-size-button-label-xl: 16px;
  --typography-line-height-button-label-xl: 24px;
  --typography-letter-spacing-button-label-xl: -0.4px;

  --typography-font-size-button-label-l: 14px;
  --typography-line-height-button-label-l: 20px;
  --typography-letter-spacing-button-label-l: -0.32px;

  --typography-font-size-button-label-m: 14px;
  --typography-line-height-button-label-m: 20px;
  --typography-letter-spacing-button-label-m: -0.32px;

  --typography-font-size-button-label-s: 14px;
  --typography-line-height-button-label-s: 20px;
  --typography-letter-spacing-button-label-s: -0.32px;

  --typography-font-size-button-label-xs: 12px;
  --typography-line-height-button-label-xs: 12px;
  --typography-letter-spacing-button-label-xs: -0.28px;

  /* ---------- SEMANTIC — background ---------- */
  --color-background-canvas-default: #111113;
  --color-background-surface-alt: #111113;
  --color-background-container: #19191b;
  --color-background-canvas-alt: #19191b;
  --color-background-active-neutral-solid: #eeeef0;
  --color-background-overlay: rgba(0, 0, 0, 0.45);
  --color-background-active-accent-solid: #ff7a1a;
  --color-background-accent-solid-pressed: #ff9c5d;
  --color-background-accent-subtle-default: rgba(252, 91, 11, 0.15);
  --color-background-active-accent-subtle: rgba(252, 91, 11, 0.15);
  --color-background-solid-disabled: #222325;
  --color-background-neutral-subtle-default: rgba(214, 226, 249, 0.09);
  --color-background-active-neutral-subtle: rgba(214, 226, 249, 0.09);
  /* cùng hex #ed8002 với Color/Border/Support/Orange/Solid nhưng là token KHÁC
     (nền badge "New"), giữ cả hai theo đúng tên trong Figma */
  --color-background-support-orange-solid: #ed8002;

  /* ---------- SEMANTIC — border ---------- */
  --color-border-container-subtle: rgba(214, 226, 249, 0.09);
  --color-border-neutral-subtle-default: rgba(215, 221, 253, 0.16);
  --color-border-active-neutral-subtle: rgba(217, 222, 252, 0.2);
  --color-border-active-accent-solid: #ff7a1a;
  --color-border-active-accent-subtle: rgba(253, 115, 34, 0.36);
  --color-border-negative-solid-pressed: #ff9c5d;
  --color-border-support-orange-solid: #ed8002;
  --container-border: rgba(214, 226, 249, 0.09);

  /* ---------- SEMANTIC — content ---------- */
  --color-content-on-colors: #ffffff;
  --color-content-on-accent-default: #ffffff;
  --color-content-on-accent-pressed: rgba(0, 0, 0, 0.86);
  --color-content-accent-base: #ff9c5d;
  --color-content-accent-light: #f26e00;
  --color-content-neutral-strongest: #eeeef0;
  --color-content-neutral-base: rgba(239, 240, 254, 0.73);
  --color-content-neutral-light: rgba(227, 231, 253, 0.49);
  --color-content-inverse-strongest: #111113;
  --color-content-disabled: rgba(224, 227, 253, 0.38);
  --color-content-warning-base: #ffc759;

  /* ---------- SEMANTIC — shadow ---------- */
  --color-shadow-neutral-light: rgba(0, 0, 0, 0.16);
  --color-shadow-neutral-strong: rgba(0, 0, 0, 0.36);
  --shadow-action-basic: 0 1px 1px 0 var(--color-shadow-neutral-light);
  --shadow-action-tertiary: drop-shadow(0 1px 0.5px var(--button-tertiary-shadow-default));
  /* Effect/Container — dùng box-shadow chứ không drop-shadow: filter không có spread */
  --effect-container:
    0 8px 24px -16px var(--color-shadow-neutral-light),
    0 12px 32px -16px var(--color-shadow-neutral-strong);

  /* ---------- COMPONENT — button ---------- */
  --button-primary-background-default: #eeeef0;
  --button-primary-content-default: #111113;
  --button-accent-background-default: #ff7a1a;
  --button-accent-content-default: #ffffff;
  --button-tertiary-background-default: #19191b;
  --button-tertiary-border-default: rgba(215, 221, 253, 0.16);
  --button-tertiary-shadow-default: rgba(0, 0, 0, 0.16);
  --button-tertiary-content-default: #eeeef0;

  --button-size-xsmall: 24px;
  --button-size-small: 32px;
  --button-size-medium: 40px;
  --button-size-large: 48px;
  --button-size-xlarge: 56px;

  --button-spacing-xsmall-gap: 0px;
  --button-spacing-xsmall-horizontal-padding: 4px;
  --button-spacing-xsmall-vertical-padding: 4px;
  --button-spacing-xsmall-text-wrapper-padding: 4px;

  --button-spacing-small-gap: 2px;
  --button-spacing-small-horizontal-padding: 8px;
  --button-spacing-small-vertical-padding: 8px;
  --button-spacing-small-text-wrapper-padding: 4px;

  --button-spacing-medium-gap: 2px;
  --button-spacing-medium-horizontal-padding: 12px;
  --button-spacing-medium-vertical-padding: 10px;
  --button-spacing-medium-text-wrapper-padding: 4px;

  --button-spacing-large-gap: 2px;
  --button-spacing-large-horizontal-padding: 16px;
  --button-spacing-large-vertical-padding: 16px;
  --button-spacing-large-text-wrapper-padding: 4px;

  --button-spacing-xlarge-gap: 4px;
  --button-spacing-xlarge-horizontal-padding: 16px;
  --button-spacing-xlarge-vertical-padding: 16px;
  --button-spacing-xlarge-text-wrapper-padding: 4px;

  /* ---------- COMPONENT — badge ---------- */
  --badge-size-medium: 28px;
  --badge-spacing-medium-gap: 4px;
  --badge-spacing-medium-horizontal-padding: 8px;
  --badge-spacing-medium-vertical-padding: 4px;
  --badge-spacing-medium-text-wrapper-padding: 2px;
  /* XSmall dùng ở card Trending màn Home (Medium dùng ở lưới màn Style) */
  --badge-size-xsmall: 16px;
  --badge-spacing-xsmall-gap: 2px;
  --badge-spacing-xsmall-horizontal-padding: 2px;
  --badge-spacing-xsmall-vertical-padding: 2px;
  --badge-spacing-xsmall-text-wrapper-padding: 4px;

  /* ---------- COMPONENT — checkbox / radio ----------
     "Seclected" là LỖI CHÍNH TẢ trong tên variable Figma — chép 1:1
     theo rule tên biến = tên variable, KHÔNG tự sửa thành "Selected". */
  --checkbox-background-seclected-default: #eeeef0;
  --checkbox-background-unselected-default: #19191b;
  --checkbox-border-default: rgba(215, 221, 253, 0.16);
  --checkbox-icon-check-default: #111113;
  --checkbox-size-medium: 16px;
  --radio-button-size-medium: 16px;

  /* ---------- COMPONENT — status ---------- */
  --warning-bg-default: #f59e0b;

  /* ---------- COMPONENT — chip ---------- */
  --chip-primary-background-unselected-default: #19191b;
  --chip-primary-border-default: rgba(215, 221, 253, 0.16);
  --chip-secondary-background-unselected-default: #19191b;
  --chip-secondary-border-default: rgba(215, 221, 253, 0.16);
  --chip-spacing-small-gap: 4px;
  --chip-spacing-small-horizontal-padding: 12px;
  --chip-spacing-small-vertical-padding: 4px;

  /* ---------- CORNER RADIUS ---------- */
  --corner-radius-base: 12px;
  --corner-radius-large: 16px;
  --corner-radius-xlarge: 20px;
  --corner-radius-2xlarge: 24px;
  --corner-radius-3xlarge: 28px;
  --corner-radius-xgiant: 36px;
  --corner-radius-rounded: 1000px;
  --corner-radius-action-xsmall: 1000px;
  --corner-radius-action-small: 1000px;
  --corner-radius-action-medium: 1000px;
  --corner-radius-action-large: 1000px;
  --corner-radius-action-xlarge: 1000px;

  /* ---------- SPACING ---------- */
  --spacing-padding-3xsmall: 2px;
  --spacing-padding-xsmall: 8px;
  --spacing-padding-small: 12px;
  --spacing-padding-medium: 16px;
  --spacing-gap-2xsmall: 4px;
  --spacing-gap-small: 12px;
  --spacing-gap-xsmall: 8px;
  --spacing-gap-medium: 16px;
  --margin-comfortable: 24px;
  --gutter: 16px;
  --modal-padding: 24px;
  --element-size-popular-2xsmall: 12px;
  --element-size-popular-base: 20px;
  --element-size-popular-2xlarge: 44px;
}

/* ============================================================
   TYPE SCALE — text style Figma → class dùng lại
   ============================================================ */
.t-heading-3 {
  font-family: var(--typography-font-family-heading), system-ui, sans-serif;
  font-weight: var(--emphasis-font-weight-bold);
  font-size: var(--typography-font-size-heading-3);
  line-height: var(--typography-line-height-heading-3);
  letter-spacing: var(--typography-letter-spacing-heading-3);
  font-variation-settings: "opsz" 14, "wdth" 100;
}
.t-heading-4 {
  font-family: var(--typography-font-family-heading), system-ui, sans-serif;
  font-weight: var(--emphasis-font-weight-bold);
  font-size: var(--typography-font-size-heading-4);
  line-height: var(--typography-line-height-heading-4);
  letter-spacing: var(--typography-letter-spacing-heading-4);
  font-variation-settings: "opsz" 14, "wdth" 100;
}
.t-subheading {
  font-family: var(--typography-font-family-heading), system-ui, sans-serif;
  font-weight: var(--emphasis-font-weight-bold);
  font-size: var(--typography-font-size-subheading);
  line-height: var(--typography-line-height-subheading);
  letter-spacing: var(--typography-letter-spacing-subheading);
  font-variation-settings: "opsz" 14, "wdth" 100;
}
.t-body-extra {
  font-family: var(--typography-font-family-sans), system-ui, sans-serif;
  font-weight: var(--emphasis-font-weight-regular);
  font-size: var(--typography-font-size-body-extra);
  line-height: var(--typography-line-height-body-extra);
  letter-spacing: var(--typography-letter-spacing-body-extra);
}
.t-body-extra-bold {
  font-family: var(--typography-font-family-sans), system-ui, sans-serif;
  font-weight: var(--emphasis-font-weight-bold);
  font-size: var(--typography-font-size-body-extra);
  line-height: var(--typography-line-height-body-extra);
  letter-spacing: var(--typography-letter-spacing-body-extra);
}
.t-body-base {
  font-family: var(--typography-font-family-sans), system-ui, sans-serif;
  font-weight: var(--emphasis-font-weight-regular);
  font-size: var(--typography-font-size-body-base);
  line-height: var(--typography-line-height-body-base);
  letter-spacing: var(--typography-letter-spacing-body-base);
}
.t-body-base-medium {
  font-family: var(--typography-font-family-sans), system-ui, sans-serif;
  font-weight: var(--emphasis-font-weight-medium);
  font-size: var(--typography-font-size-body-base);
  line-height: var(--typography-line-height-body-base);
  letter-spacing: var(--typography-letter-spacing-body-base);
}
.t-body-base-bold {
  font-family: var(--typography-font-family-sans), system-ui, sans-serif;
  font-weight: var(--emphasis-font-weight-bold);
  font-size: var(--typography-font-size-body-base);
  line-height: var(--typography-line-height-body-base);
  letter-spacing: var(--typography-letter-spacing-body-base);
}
.t-body-small-bold {
  font-family: var(--typography-font-family-sans), system-ui, sans-serif;
  font-weight: var(--emphasis-font-weight-bold);
  font-size: var(--typography-font-size-body-small);
  line-height: var(--typography-line-height-body-small);
  letter-spacing: var(--typography-letter-spacing-body-small);
}