/* ============================================================================
 * Elyra v0.3.2 — screen tokens (Figma → code)
 * Source: Figma "Elyra" fileKey VuA9cN4kFgZOzr1eC1IB7y, node 2206-969 (Home)
 * Naming: tên variable Figma 1:1, thay "/" và " " bằng "-" (giữ nguyên casing
 * và cả lỗi chính tả "shadown" theo source). Font: Nunito — _ds_bundle.css chỉ
 * nạp 600/700/800, màn này cần thêm 400 (body) + 500 (nav label).
 * ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500&display=swap");

:root {
  /* --- Primary --- */
  --Primary-50: #f1effe;
  --Primary-100: #dfdbfc;
  --Primary-400: #9686f5;
  --Primary-600: #7051ee;
  --Primary-Alpha-500-60: #826cf299;
  --Primary-Alpha-500-50: #826cf280;
  --Primary-Alpha-500-10: #826cf21a;
  --Primary-bg-default: #826cf2;
  --Primary-bg-strong: #7051ee;
  --Primary-bg-subtle: #f1effe;
  --Primary-bg-emphasis: #5725e4;
  --Primary-bg-muted: #dfdbfc;
  --Primary-br-default: #826cf2;
  --Primary-br-subtle: #c4bcf9;
  --Primary-txt-default: #7051ee;
  --Primary-txt-strong: #5725e4;
  --Primary-ic-default: #826cf2;
  --Primary-ic-subtle: #aca1f7;

  /* --- Neutral --- */
  --Neutral-400: #ced4da;
  --Neutral-500: #adb5bd;
  --Neutral-bg-default: #ffffff;
  --Neutral-bg-subtle: #f8f9fa;
  --Neutral-bg-muted: #f1f3f5;
  --Neutral-bg-emphasis: #101214;
  --Neutral-txt-disabled: #ced4da;
  --Neutral-br-default: #e9ecef;
  --Neutral-br-strong: #ced4da;
  --Neutral-txt-default: #212529;
  --Neutral-txt-subtle: #868e96;
  --Neutral-txt-on-emphasis: #ffffff;
  --Neutral-ic-default: #495057;
  --Neutral-ic-on-emphasis: #f8f9fa;

  /* --- Status --- */
  --Info-ic-default: #3b82f6;
  --Success-bg-default: #22c55e;
  --Warning-ic-default: #f59e0b;
  --Warning-bg-default: #f59e0b;

  /* --- Button (giá trị component v0.3.2 — KHÁC bảng --button-* của DS v0.1) --- */
  --Button-Primary-bg-default: #826cf2;
  --Button-Primary-bg-shadown: #7051ee; /* typo theo Figma */
  --Button-Primary-ic-default: #ffffff;
  --Button-Ghost-txt-default: #7051ee;
  --Button-Secondary-bg-default: #f1effe;
  --Button-Secondary-bg-shadown: #c4bcf9; /* typo theo Figma */
  --Button-Secondary-txt-default: #7051ee;
  --Button-Secondary-ic-default: #826cf2;
  --Button-Secondary-br-default: #826cf24d;
  --Button-Ghost-ic-default: #826cf2;

  /* --- Effect --- */
  --Drop-Shadow-100: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);

  /* --- Typography (Static/*) --- */
  --Static-Font: "Nunito", system-ui, sans-serif;
  --Static-Display-Small-Size: 36px;   --Static-Display-Small-Line-Height: 44px;  --Static-Display-Small-Tracking: 0px;
  --Static-Headline-Small-Size: 24px;  --Static-Headline-Small-Line-Height: 32px; --Static-Headline-Small-Tracking: 0px;
  --Static-Headline-Medium-Size: 28px; --Static-Headline-Medium-Line-Height: 36px; --Static-Headline-Medium-Tracking: 0px;
  --Static-Title-Large-Size: 22px;     --Static-Title-Large-Line-Height: 28px;    --Static-Title-Large-Tracking: 0px;
  --Static-Title-Medium-Size: 16px;    --Static-Title-Medium-Line-Height: 24px;   --Static-Title-Medium-Tracking: 0.15px;
  --Static-Title-Small-Size: 14px;     --Static-Title-Small-Line-Height: 20px;    --Static-Title-Small-Tracking: 0.1px;
  --Static-Body-Large-Size: 16px;      --Static-Body-Large-Line-Height: 24px;     --Static-Body-Large-Tracking: 0.5px;
  --Static-Body-Medium-Size: 14px;     --Static-Body-Medium-Line-Height: 20px;    --Static-Body-Medium-Tracking: 0.25px;
  --Static-Label-Large-Size: 14px;     --Static-Label-Large-Line-Height: 20px;    --Static-Label-Large-Tracking: 0.1px;
  --Static-Label-Medium-Size: 12px;    --Static-Label-Medium-Line-Height: 16px;   --Static-Label-Medium-Tracking: 0.5px;
  --Static-Label-Small-Size: 11px;     --Static-Label-Small-Line-Height: 16px;    --Static-Label-Small-Tracking: 0.5px;
}

/* Text styles Figma (display/small-emphasized, title/large-emphasized, ...) */
.type-display-small-em  { font: 700 var(--Static-Display-Small-Size)/var(--Static-Display-Small-Line-Height) var(--Static-Font);   letter-spacing: var(--Static-Display-Small-Tracking); }
.type-headline-small-em { font: 700 var(--Static-Headline-Small-Size)/var(--Static-Headline-Small-Line-Height) var(--Static-Font); letter-spacing: var(--Static-Headline-Small-Tracking); }
.type-headline-medium-em { font: 700 var(--Static-Headline-Medium-Size)/var(--Static-Headline-Medium-Line-Height) var(--Static-Font); letter-spacing: var(--Static-Headline-Medium-Tracking); }
.type-title-large-em    { font: 700 var(--Static-Title-Large-Size)/var(--Static-Title-Large-Line-Height) var(--Static-Font);       letter-spacing: var(--Static-Title-Large-Tracking); }
.type-title-medium-em   { font: 700 var(--Static-Title-Medium-Size)/var(--Static-Title-Medium-Line-Height) var(--Static-Font);     letter-spacing: var(--Static-Title-Medium-Tracking); }
.type-title-small-em    { font: 700 var(--Static-Title-Small-Size)/var(--Static-Title-Small-Line-Height) var(--Static-Font);       letter-spacing: var(--Static-Title-Small-Tracking); }
.type-title-small       { font: 500 var(--Static-Title-Small-Size)/var(--Static-Title-Small-Line-Height) var(--Static-Font);       letter-spacing: var(--Static-Title-Small-Tracking); }
.type-body-large-em     { font: 700 var(--Static-Body-Large-Size)/var(--Static-Body-Large-Line-Height) var(--Static-Font);         letter-spacing: var(--Static-Body-Large-Tracking); }
.type-body-large        { font: 400 var(--Static-Body-Large-Size)/var(--Static-Body-Large-Line-Height) var(--Static-Font);         letter-spacing: var(--Static-Body-Large-Tracking); }
.type-body-medium       { font: 400 var(--Static-Body-Medium-Size)/var(--Static-Body-Medium-Line-Height) var(--Static-Font);       letter-spacing: var(--Static-Body-Medium-Tracking); }
.type-label-large-em    { font: 700 var(--Static-Label-Large-Size)/var(--Static-Label-Large-Line-Height) var(--Static-Font);       letter-spacing: var(--Static-Label-Large-Tracking); }
.type-label-medium-em   { font: 700 var(--Static-Label-Medium-Size)/var(--Static-Label-Medium-Line-Height) var(--Static-Font);     letter-spacing: var(--Static-Label-Medium-Tracking); }
.type-label-small-em    { font: 700 var(--Static-Label-Small-Size)/var(--Static-Label-Small-Line-Height) var(--Static-Font);       letter-spacing: var(--Static-Label-Small-Tracking); }