/* ============================================================
   Sinh Vu Design System — tokens.css
   v2.3.0 · 2026-06-06 · SINH TU DONG tu 02_tokens.json
   (Style Dictionary — build/build.mjs). KHONG sua tay file nay;
   sua 02_tokens.json roi build lai.
   ------------------------------------------------------------
   Nguyen tac: giao dien CHI dung bien --sv-* tang semantic.
   Khong dung gia tri tho / bien primitive truc tiep trong UI.
   ============================================================ */

/* ---- LIGHT theme (mac dinh) ---- */
:root {

  /* ════════════════════════════════════════════════════════════════════
   * Palette canonical · Fiesta Sunset Serenade (Coolors.co)
   *   Wine    #6C0E23  accent-deep   (hover/active CTA, depth tone)
   *   Red     #C42021  accent-default (CTA chính, em italic, link)
   *   Cream   #FFEAAE  cream-tint    (brand emphasis HIẾM, name card)
   *   Navy D  #031D44  text-primary  (h1, body chính, inverse bg)
   *   Navy M  #04395E  text-secondary (lede, subtitle, secondary text)
   * WCAG 2.2 verified · 14 cặp AAA + 4 cặp AA · 0 FAIL
   * Reference: https://coolors.co/6c0e23-c42021-ffeaae-031d44-04395e
   * ════════════════════════════════════════════════════════════════════ */

  /* color · text */
  --sv-color-text-primary     : #031D44;    /* Fiesta Navy D */
  --sv-color-text-secondary   : #04395E;    /* Fiesta Navy M */
  --sv-color-text-muted       : #5C6470;
  --sv-color-text-disabled    : #C7C7CC;
  --sv-color-text-inverse     : #FFFFFF;
  --sv-color-text-on-accent   : #FFFFFF;
  /* Cream Sinh Vũ — TINT HIẾM cho brand emphasis (dùng có chủ đích) */
  --sv-color-cream-tint : #FFEAAE;          /* Fiesta Cream */

  --sv-color-text-accent      : #C42021;    /* Fiesta Red */
  --sv-color-text-link        : #C42021;

  /* color · surface */
  --sv-color-surface-default  : #FAF7F2;    /* cream warm chuẩn Cua-2 (was #F2F2F7 gray) */
  --sv-color-surface-raised   : #FFFFFF;
  --sv-color-surface-sunken   : #F4F1EB;    /* cream beige chuẩn Cua-2 */
  --sv-color-surface-inverse  : #031D44;    /* Fiesta Navy D */
  --sv-color-surface-overlay  : #FFFFFF;

  /* color · border */
  --sv-color-border-subtle    : #AEAEB2;
  --sv-color-border-default   : #8E8E93;
  --sv-color-border-strong    : #5C6470;

  /* color · accent */
  --sv-color-accent-default   : #C42021;    /* Fiesta Red */
  --sv-color-accent-hover     : #6C0E23;    /* Fiesta Wine (depth on hover) */
  --sv-color-accent-deep      : #6C0E23;    /* alias semantic Wine */
  --sv-color-accent-subtle    : #F08A75;    /* warm peach (derived, ko trong Fiesta) */

  /* color · feedback */
  --sv-color-feedback-success : #1A5E4A;
  --sv-color-feedback-warning : #B8761A;
  --sv-color-feedback-danger  : #A4161A;
  --sv-color-feedback-info    : #1F5C8E;

  /* color · chart */
  --sv-color-chart-1          : #C42021;    /* Fiesta Red */
  --sv-color-chart-2          : #04395E;    /* Fiesta Navy M */
  --sv-color-chart-3          : #1A5E4A;
  --sv-color-chart-4          : #B8761A;
  --sv-color-chart-5          : #6C0E23;    /* Fiesta Wine */
  --sv-color-chart-6          : #0F6E6E;
  --sv-color-chart-7          : #5B3E8E;
  --sv-color-chart-8          : #565C66;

  /* color · scrim */
  --sv-color-scrim            : rgba(3,29,68,0.55);   /* Fiesta Navy D */

  /* typography · families
     · Noto Serif Display (anh chốt, sẽ điều chỉnh sau) */
  --sv-font-display           : "Noto Serif Display", "Noto Serif", Georgia, "Times New Roman", serif;
  --sv-font-heading           : "Noto Sans Display", "Noto Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sv-font-body              : "Noto Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sv-font-mono              : "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;

  /* typography · weights */
  --sv-font-weight-regular    : 400;
  --sv-font-weight-medium     : 500;
  --sv-font-weight-semibold   : 600;
  --sv-font-weight-bold       : 700;

  /* typography · tracking (dynamic tracking — Apple-style) */
  --sv-tracking-tight         : -0.02em;
  --sv-tracking-snug          : -0.01em;
  --sv-tracking-normal        : 0em;
  --sv-tracking-wide          : 0.02em;
  --sv-tracking-wider         : 0.08em;
  --sv-tracking-widest        : 0.18em;

  /* typography · roles (size / line-height / weight / tracking) */
  --sv-font-size-display      : 3.052rem;
  --sv-line-height-display    : 1.1;
  --sv-font-weight-display    : 600;
  --sv-tracking-display       : -0.02em;
  --sv-font-size-heading-lg   : 2.441rem;
  --sv-line-height-heading-lg : 1.2;
  --sv-font-weight-heading-lg : 700;
  --sv-tracking-heading-lg    : -0.01em;
  --sv-font-size-heading-md   : 1.953rem;
  --sv-line-height-heading-md : 1.25;
  --sv-font-weight-heading-md : 600;
  --sv-tracking-heading-md    : -0.01em;
  --sv-font-size-heading-sm   : 1.563rem;
  --sv-line-height-heading-sm : 1.3;
  --sv-font-weight-heading-sm : 600;
  --sv-tracking-heading-sm    : -0.01em;
  --sv-font-size-body-lg      : 1.25rem;
  --sv-line-height-body-lg    : 1.6;
  --sv-font-weight-body-lg    : 500;
  --sv-tracking-body-lg       : 0em;
  --sv-font-size-body-md      : 1rem;
  --sv-line-height-body-md    : 1.6;
  --sv-font-weight-body-md    : 500;
  --sv-tracking-body-md       : 0em;
  --sv-font-size-body-sm      : 0.875rem;
  --sv-line-height-body-sm    : 1.5;
  --sv-font-weight-body-sm    : 500;
  --sv-tracking-body-sm       : 0.02em;
  --sv-font-size-label        : 0.875rem;
  --sv-line-height-label      : 1.4;
  --sv-font-weight-label      : 600;
  --sv-tracking-label         : 0.08em;
  --sv-font-size-eyebrow      : 0.75rem;
  --sv-line-height-eyebrow    : 1.4;
  --sv-font-weight-eyebrow    : 500;
  --sv-tracking-eyebrow       : 0.18em;
  --sv-font-size-mono         : 0.875rem;
  --sv-line-height-mono       : 1.5;
  --sv-font-weight-mono       : 400;
  --sv-tracking-mono          : 0.02em;
  --sv-font-size-display-hero : clamp(2.75rem, 6vw, 4.768rem);
  --sv-line-height-display-hero: 1.04;
  --sv-font-weight-display-hero: 600;
  --sv-tracking-display-hero  : -0.02em;

  /* space scale (primitive — thang dung cho nhip doc/gap) */
  --sv-space-100              : 0.25rem;  /* 4px */
  --sv-space-200              : 0.5rem;   /* 8px */
  --sv-space-300              : 0.75rem;  /* 12px */
  --sv-space-400              : 1rem;     /* 16px */
  --sv-space-500              : 1.25rem;  /* 20px — added 2026-06-10 (135 files used trước khi định nghĩa, fall back 0) */
  --sv-space-600              : 1.5rem;   /* 24px */
  --sv-space-700              : 1.75rem;  /* 28px — added 2026-06-10 (12 files used trước khi định nghĩa, fall back 0) */
  --sv-space-800              : 2rem;     /* 32px */
  --sv-space-1000             : 2.5rem;   /* 40px */
  --sv-space-1200             : 3rem;     /* 48px */
  --sv-space-1600             : 4rem;     /* 64px */
  --sv-space-2000             : 5rem;     /* 80px */
  --sv-space-2400             : 6rem;     /* 96px */
  /* radius scale (primitive) */
  --sv-radius-sm              : 0.25rem;
  --sv-radius-md              : 0.5rem;
  --sv-radius-lg              : 1rem;
  --sv-radius-full            : 9999px;

  /* space + radius (semantic — uu tien dung trong UI) */
  --sv-space-inset            : 1rem;
  --sv-space-stack            : 1.5rem;
  --sv-space-section          : 3rem;
  --sv-space-gap-tight        : 0.5rem;
  --sv-space-gap              : 1rem;
  --sv-space-section-y        : 5rem;
  --sv-radius-control         : 0.5rem;
  --sv-radius-card            : 1rem;
  --sv-radius-pill            : 9999px;

  /* shadow · navy-tinted (Fiesta Navy D #031D44) */
  --sv-shadow-sm              : 0 1px 2px 0 #031D4412;
  --sv-shadow-md              : 0 10px 30px -8px #031D4422;

  /* breakpoints (tham chieu — @media khong nhan var()) + touch target */
  --sv-breakpoint-sm          : 480px;
  --sv-breakpoint-md          : 768px;
  --sv-breakpoint-lg          : 1024px;
  --sv-breakpoint-xl          : 1280px;
  --sv-size-touch-min         : 44px;
  --sv-size-touch-comfort     : 48px;
  --sv-size-tap-gap           : 8px;
  --sv-size-font-min-input    : 16px;

  /* container (be ngang noi dung chuan — chong troi max-width) */
  --sv-container-narrow       : 480px;
  --sv-container-text         : 720px;
  --sv-container-article      : 860px;
  --sv-container-feature      : 980px;
  --sv-container-content      : 1200px;
  --sv-container-wide         : 1280px;
  --sv-gutter-page            : clamp(1.25rem, 5vw, 2.5rem);
  --sv-gutter-grid            : clamp(1rem, 3vw, 2rem);

  /* z-index (thang layer chrome) */
  --sv-z-base                 : 0;
  --sv-z-raised               : 10;
  --sv-z-dropdown             : 1000;
  --sv-z-sticky               : 1100;
  --sv-z-header               : 1200;
  --sv-z-drawer               : 1300;
  --sv-z-modal                : 1400;
  --sv-z-popover              : 1500;
  --sv-z-toast                : 1600;

  /* motion (duration + easing) */
  --sv-duration-instant       : 100ms;
  --sv-duration-fast          : 150ms;
  --sv-duration-base          : 250ms;
  --sv-duration-slow          : 400ms;
  --sv-duration-slower        : 700ms;
  --sv-ease-standard          : cubic-bezier(.2,0,0,1);
  --sv-ease-decelerate        : cubic-bezier(0,0,.2,1);
  --sv-ease-accelerate        : cubic-bezier(.4,0,1,1);
  --sv-ease-spring            : cubic-bezier(.2,.8,.2,1);

  /* focus ring (a11y ban phim) */
  --sv-focus-ring-width       : 2px;
  --sv-focus-ring-offset      : 2px;

  /* border-width + opacity + icon-size (UI phuc tap) */
  --sv-border-width-thin      : 1px;
  --sv-border-width-base      : 1.5px;
  --sv-border-width-thick     : 2px;
  --sv-border-width-heavy     : 4px;
  --sv-opacity-disabled       : 0.4;
  --sv-opacity-scrim          : 0.55;
  --sv-opacity-overlay-hover  : 0.08;
  --sv-opacity-overlay-press  : 0.12;
  --sv-opacity-muted          : 0.6;
  --sv-icon-xs                : 16px;
  --sv-icon-sm                : 20px;
  --sv-icon-md                : 24px;
  --sv-icon-lg                : 32px;
  --sv-icon-xl                : 40px;

  /* component (alias -> semantic, tu doi theo theme) */
  --sv-button-primary-bg      : var(--sv-color-accent-default);
  --sv-button-primary-bg-hover: var(--sv-color-accent-hover);
  --sv-button-primary-text    : var(--sv-color-text-on-accent);
  --sv-button-primary-radius  : var(--sv-radius-control);
  --sv-button-secondary-bg    : var(--sv-color-surface-raised);
  --sv-button-secondary-text  : var(--sv-color-text-accent);
  --sv-button-secondary-border: var(--sv-color-border-default);
  --sv-button-secondary-radius: var(--sv-radius-control);
  --sv-card-bg                : var(--sv-color-surface-raised);
  --sv-card-border            : var(--sv-color-border-subtle);
  --sv-card-radius            : var(--sv-radius-card);
  --sv-card-inset             : var(--sv-space-inset);
}

/* ---- DARK theme (remap tang semantic — component khong doi) ---- */
[data-theme="dark"] {

  /* color · text */
  --sv-color-text-primary     : #E6E8EC;
  --sv-color-text-secondary   : #AEB3BB;
  --sv-color-text-muted       : #9197A0;
  --sv-color-text-disabled    : #565C66;
  --sv-color-text-inverse     : #E6E8EC;
  --sv-color-text-on-accent   : #FFFFFF;
  /* Cream Sinh Vũ — TINT HIẾM cho brand emphasis (dùng có chủ đích) */
  --sv-color-cream-tint : #FFEAAE;

  --sv-color-text-accent      : #FFEAAE;
  --sv-color-text-link        : #FFEAAE;

  /* color · surface */
  --sv-color-surface-default  : #16191F;
  --sv-color-surface-raised   : #1E232B;
  --sv-color-surface-sunken   : #0F1216;
  --sv-color-surface-inverse  : #272D36;
  --sv-color-surface-overlay  : #353C46;

  /* color · border */
  --sv-color-border-subtle    : #272D36;
  --sv-color-border-default   : #353C46;
  --sv-color-border-strong    : #4E5663;

  /* color · accent · Fiesta-aligned cho dark mode */
  --sv-color-accent-default   : #C42021;    /* Fiesta Red (giữ nhất quán light/dark) */
  --sv-color-accent-hover     : #6C0E23;    /* Fiesta Wine */
  --sv-color-accent-deep      : #6C0E23;    /* alias Wine */
  --sv-color-accent-subtle    : #6C0E23;

  /* color · feedback */
  --sv-color-feedback-success : #74C6A8;
  --sv-color-feedback-warning : #E8B45C;
  --sv-color-feedback-danger  : #F2918A;
  --sv-color-feedback-info    : #85B8E3;

  /* color · chart */
  --sv-color-chart-1          : #F08A75;
  --sv-color-chart-2          : #85B8E3;
  --sv-color-chart-3          : #74C6A8;
  --sv-color-chart-4          : #E8B45C;
  --sv-color-chart-5          : #C96A78;
  --sv-color-chart-6          : #5FBDBD;
  --sv-color-chart-7          : #B49BDD;
  --sv-color-chart-8          : #AEB3BB;
  /* font / space / radius ke thua tu :root */
}

/* ---- DENSITY: compact (remap spacing semantic — UI du lieu day dac) ---- */
[data-density="compact"] {
  --sv-space-inset            : var(--sv-space-200);
  --sv-space-stack            : var(--sv-space-300);
  --sv-space-gap              : var(--sv-space-200);
  --sv-space-gap-tight        : var(--sv-space-100);
  --sv-space-section          : var(--sv-space-800);
}

/* ============================================================
   Vi du component — minh hoa cach UI tieu thu token semantic.
   ============================================================ */

.sv-btn-primary {
  background: var(--sv-button-primary-bg);
  color: var(--sv-button-primary-text);
  border-radius: var(--sv-button-primary-radius);
  font-family: var(--sv-font-body);
  padding: var(--sv-space-inset);
  border: none;
  cursor: pointer;
}
.sv-btn-primary:hover { background: var(--sv-button-primary-bg-hover); }

.sv-btn-secondary {
  background: var(--sv-button-secondary-bg);
  color: var(--sv-button-secondary-text);
  border: 1px solid var(--sv-button-secondary-border);
  border-radius: var(--sv-button-secondary-radius);
  font-family: var(--sv-font-body);
  padding: var(--sv-space-inset);
  cursor: pointer;
}

.sv-card {
  background: var(--sv-card-bg);
  border: 1px solid var(--sv-card-border);
  border-radius: var(--sv-card-radius);
  padding: var(--sv-card-inset);
}

.sv-heading-lg {
  font-family: var(--sv-font-heading);
  font-size: var(--sv-font-size-heading-lg);
  line-height: var(--sv-line-height-heading-lg);
  color: var(--sv-color-text-primary);
}

.sv-body {
  font-family: var(--sv-font-body);
  font-size: var(--sv-font-size-body-md);
  line-height: var(--sv-line-height-body-md);
  color: var(--sv-color-text-secondary);
}

/* ============================================================
   ★ LEGACY COMPAT SHIM v1.0 — Sinh Vũ OPC pre-rebrand → v2.3.1
   ------------------------------------------------------------
   Mục đích: 55 file HTML đã build dùng biến cũ (--sv-orange-*,
   --sv-paper-*, --sv-f-display, --sv-s-3...) vẫn hoạt động sau
   khi token canonical chuyển sang v2.3.1.
   
   Hướng dẫn: KHÔNG dùng các biến trong block này cho code mới.
   Code mới chỉ dùng tokens semantic của v2.3.1 (--sv-color-*,
   --sv-font-*, --sv-space-*, --sv-container-*, etc.)
   ============================================================ */

:root {
  /* ─── COLORS: orange → red (brand đổi) ─── */
  --sv-orange-50  : #FEEEEC;
  --sv-orange-100 : #FDD8D4;
  --sv-orange-200 : #FAA89F;
  --sv-orange-300 : #F08A75;
  --sv-orange-400 : #E55540;
  --sv-orange-500 : var(--sv-color-accent-default);   /* Fiesta Red #C42021 */
  --sv-orange-600 : #A41A1A;
  --sv-orange-700 : var(--sv-color-accent-hover);     /* Fiesta Wine #6C0E23 */
  --sv-orange-800 : #6C0E23;
  --sv-orange-900 : #4A0918;

  --sv-accent       : var(--sv-color-accent-default);
  --sv-accent-hover : var(--sv-color-accent-hover);

  /* ─── COLORS: paper (cream warm → Apple-clean) ─── */
  --sv-paper       : var(--cua2-bg-paper);    /* cream warm #FAF7F2 chuẩn Cua-2 */
  --sv-paper-cream : var(--cua2-bg-paper);    /* cream warm */
  --sv-paper-card  : var(--cua2-bg-raised);   /* white #FFFFFF */
  --sv-paper-sunk  : var(--cua2-bg-sidebar);  /* cream beige #F4F1EB darker */

  /* ─── COLORS: navy scale → text/surface inverse ───
     2026-06-07: lighten navy-50 + navy-100 để chip/pill hài hoà với paper-warm.
     Trước: navy-100=#B8C2D1 (luminance ~76%) → quá đậm trên paper, rời rạc.
     Sau:   navy-100=#EDEFF3 (~95%) Apple subtle-inset, vẫn distinguishable. */
  --sv-navy-50    : #F4F6F9;
  --sv-navy-100   : #EDEFF3;
  --sv-navy-200   : #8A9AB0;
  --sv-navy-300   : #5C7290;
  --sv-navy-400   : #2E4970;
  --sv-navy-500   : var(--sv-color-text-secondary);   /* #3A4654 */
  --sv-navy-600   : #2A3340;
  --sv-navy-700   : #1F2A38;
  --sv-navy-800   : #04395E;                          /* Fiesta Navy M */
  --sv-navy-900   : var(--sv-color-text-primary);     /* Fiesta Navy D #031D44 */

  /* ─── COLORS: text semantic ─── */
  --sv-text        : var(--sv-color-text-primary);
  --sv-text-muted  : var(--sv-color-text-muted);
  --sv-text-faint  : var(--sv-color-text-disabled);
  --sv-text-on-dark: var(--sv-color-text-inverse);

  /* ─── COLORS: lines (borders) ─── */
  --sv-line        : var(--sv-color-border-subtle);
  --sv-line-strong : var(--sv-color-border-strong);

  /* ─── COLORS: feedback ─── */
  --sv-success-50  : #E5F4EE;
  --sv-success-500 : var(--sv-color-feedback-success);
  --sv-success-700 : #145744;
  --sv-warning-50  : #FEF3E2;
  --sv-warning-500 : var(--sv-color-feedback-warning);
  --sv-warning-700 : #6E480E;
  --sv-danger-50   : #FBE9EC;
  --sv-danger-500  : var(--sv-color-feedback-danger);
  --sv-info-50     : #E6F0F8;
  --sv-info-500    : var(--sv-color-feedback-info);
  --sv-purple-50   : #F1ECF8;
  --sv-purple-500  : #5B3E8E;

  /* ─── TYPOGRAPHY: font families ─── */
  --sv-f-display : var(--sv-font-display);
  --sv-f-heading : var(--sv-font-heading);
  --sv-f-body    : var(--sv-font-body);
  --sv-f-sans    : var(--sv-font-body);
  --sv-f-label   : var(--sv-font-mono);  /* eyebrow trước dùng label, giờ là mono */
  --sv-f-mono    : var(--sv-font-mono);

  /* ─── TYPOGRAPHY: font weights ─── */
  --sv-fw-regular   : var(--sv-font-weight-regular);
  --sv-fw-medium    : var(--sv-font-weight-medium);
  --sv-fw-semibold  : var(--sv-font-weight-semibold);
  --sv-fw-bold      : var(--sv-font-weight-bold);
  --sv-fw-extrabold : var(--sv-font-weight-bold);
  --sv-fw-black     : var(--sv-font-weight-bold);

  /* ─── TYPOGRAPHY: font sizes (legacy scale ↔ new role-based) ─── */
  --sv-t-xs      : var(--sv-font-size-label);
  --sv-t-sm      : var(--sv-font-size-body-sm);
  --sv-t-base    : var(--sv-font-size-body-md);
  --sv-t-md      : var(--sv-font-size-body-lg);
  --sv-t-lg      : var(--sv-font-size-heading-sm);
  --sv-t-xl      : var(--sv-font-size-heading-md);
  --sv-t-2xl     : var(--sv-font-size-heading-lg);
  --sv-t-3xl     : var(--sv-font-size-display);
  --sv-t-4xl     : 2.441rem;
  --sv-t-5xl     : 3.052rem;
  --sv-t-display : var(--sv-font-size-display-hero);

  /* ─── TYPOGRAPHY: line-height ─── */
  --sv-lh-tight   : 1.1;
  --sv-lh-snug    : 1.25;
  --sv-lh-normal  : 1.5;
  --sv-lh-relaxed : 1.6;
  --sv-lh-loose   : 1.7;
  --sv-lh-prose   : 1.65;

  /* ─── TYPOGRAPHY: letter-spacing ─── */
  --sv-ls-tight   : var(--sv-tracking-tight);
  --sv-ls-snug    : var(--sv-tracking-snug);
  --sv-ls-normal  : var(--sv-tracking-normal);
  --sv-ls-wide    : var(--sv-tracking-wide);
  --sv-ls-wider   : var(--sv-tracking-wider);
  --sv-ls-widest  : var(--sv-tracking-widest);

  /* ─── SPACING (4px grid: legacy --sv-s-N ↔ primitive space scale) ─── */
  --sv-s-0    : 0;
  --sv-s-1    : 0.25rem;   /* 4px */
  --sv-s-2    : 0.5rem;    /* 8px */
  --sv-s-3    : 0.75rem;   /* 12px */
  --sv-s-4    : 1rem;      /* 16px */
  --sv-s-5    : 1.25rem;   /* 20px */
  --sv-s-6    : 1.5rem;    /* 24px */
  --sv-s-7    : 2rem;      /* 32px */
  --sv-s-8    : 2.5rem;    /* 40px */
  --sv-s-9    : 3rem;      /* 48px */
  --sv-s-10   : 4rem;      /* 64px */
  --sv-s-11   : 5rem;      /* 80px */
  --sv-s-6px  : 0.375rem;
  --sv-s-10px : 0.625rem;
  --sv-s-14px : 0.875rem;
  --sv-s-18px : 1.125rem;
  --sv-s-20px : 1.25rem;
  --sv-s-22px : 1.375rem;
  --sv-s-28px : 1.75rem;
  --sv-s-40px : 2.5rem;
  --sv-s-56px : 3.5rem;

  /* ─── RADIUS ─── */
  --sv-r-xs   : 4px;
  --sv-r-sm   : var(--sv-radius-sm);
  --sv-r-md   : var(--sv-radius-md);
  --sv-r-lg   : var(--sv-radius-lg);
  --sv-r-xl   : 20px;
  --sv-r-2xl  : 24px;
  --sv-r-full : var(--sv-radius-full);

  /* ─── MOTION: duration ─── */
  --sv-d-instant : var(--sv-duration-instant);
  --sv-d-fast    : var(--sv-duration-fast);
  --sv-d-base    : var(--sv-duration-base);
  --sv-d-slow    : var(--sv-duration-slow);
  --sv-d-lazy    : var(--sv-duration-slower);

  /* ─── MOTION: easing ─── */
  --sv-e-linear  : linear;
  --sv-e-out     : var(--sv-ease-decelerate);
  --sv-e-in      : var(--sv-ease-accelerate);
  --sv-e-in-out  : var(--sv-ease-standard);
  --sv-e-bounce  : var(--sv-ease-spring);
  --sv-ease      : var(--sv-ease-standard);
  --sv-ease-out  : var(--sv-ease-decelerate);

  /* ─── LAYOUT: max-width legacy → containers v2.3.1 ─── */
  --sv-max-narrow  : var(--sv-container-narrow);   /* 480 */
  --sv-max-prose   : var(--sv-container-text);     /* 720 */
  --sv-max-content : var(--sv-container-content);  /* 1200 */
  --sv-max-hero    : var(--sv-container-wide);     /* 1280 */
  --sv-container-sm  : var(--sv-container-narrow);
  --sv-container-md  : var(--sv-container-text);
  --sv-container-lg  : var(--sv-container-feature);
  --sv-container-xl  : var(--sv-container-content);
  --sv-container-2xl : var(--sv-container-wide);

  /* ─── BREAKPOINTS ─── */
  --sv-bp-sm  : var(--sv-breakpoint-sm);
  --sv-bp-md  : var(--sv-breakpoint-md);
  --sv-bp-lg  : var(--sv-breakpoint-lg);
  --sv-bp-xl  : var(--sv-breakpoint-xl);
  --sv-bp-2xl : 1536px;

  /* ─── SHADOWS (legacy nhiều bậc → 2 bậc canonical mới) ─── */
  --sv-shadow-xs   : 0 1px 2px rgba(0, 16, 34, 0.04);
  --sv-shadow-lg   : 0 12px 30px rgba(0, 16, 34, 0.10);
  --sv-shadow-xl   : 0 20px 48px rgba(0, 16, 34, 0.14);
  --sv-shadow-2xl  : 0 32px 72px rgba(0, 16, 34, 0.18);
  --sv-shadow-glow : 0 0 24px rgba(219, 34, 15, 0.30);   /* red glow */

  /* ─── A11Y (legacy --sv-a11y-* → v2.3.1 --sv-focus-* + --sv-size-touch*) ─── */
  --sv-a11y-focus-ring-width  : var(--sv-focus-ring-width);
  --sv-a11y-focus-ring-offset : var(--sv-focus-ring-offset);
  --sv-a11y-min-target        : 44px;

  /* ─── MISC ─── */
  --sv-error        : var(--sv-color-feedback-danger);
  --sv-error-border : var(--sv-color-feedback-danger);
  --sv-error-deep   : #8B1A1F;
  --sv-error-soft   : #FBE9EC;
  --sv-error-text   : #8B1A1F;
  --sv-z-card       : 10;
}

/* ─── DARK MODE overrides cho legacy navy scale (giữ contrast hợp lý) ─── */
[data-theme="dark"] {
  --sv-paper-cream : var(--sv-color-surface-default);
  --sv-paper-card  : var(--sv-color-surface-raised);
  --sv-paper-sunk  : var(--sv-color-surface-sunken);
  --sv-text        : var(--sv-color-text-primary);
  --sv-text-muted  : var(--sv-color-text-muted);
  --sv-line        : var(--sv-color-border-subtle);
  --sv-line-strong : var(--sv-color-border-strong);
  --sv-navy-900    : var(--sv-color-text-primary);
  --sv-orange-500  : var(--sv-color-accent-default);
  --sv-orange-700  : var(--sv-color-accent-hover);
  --sv-success-50  : rgba(26, 94, 74, 0.15);
  --sv-warning-50  : rgba(138, 90, 18, 0.15);
  --sv-danger-50   : rgba(164, 22, 26, 0.15);
}

/* ─── CUA-2 WARM PALETTE [BRAND ASSET] ─── */
/* Claude.ai-inspired cream feel — intentional break from default neutral surface */
:root {
  --cua2-bg-paper: #FAF7F2;
  --cua2-bg-sidebar: #F4F1EB;
  --cua2-bg-raised: #FFFFFF;
  --cua2-border-hair: #ECE7DD;
  --cua2-border-soft: #E0DACD;
  --cua2-text-ink: #303030;
  --cua2-text-secondary: #5A574E;
  --cua2-text-muted: #8A8579;

  /* ─── FIESTA SUNSET SERENADE · Palette canonical 2026-06-12 ───
     Anh Sinh chốt palette Coolors.co làm canonical chính thức Sinh Vũ.
     Mã chuẩn: 6c0e23-c42021-ffeaae-031d44-04395e
     Đã verify WCAG 2.2: 14 cặp AAA + 4 cặp AA · 0 FAIL */
  --sv-sys-accent-default: #C42021;  /* Fiesta Red, vibrant chính, logo symbol */
  --sv-sys-accent-deep:    #6C0E23;  /* Fiesta Wine, sâu, hover/active, depth */
  --sv-sys-accent-darker:  #6C0E23;  /* alias Wine cho legacy compat */
  --sv-sys-cream-gold:     #FFEAAE;  /* Fiesta Cream, name card highlight */
  --sv-sys-navy-deep:      #031D44;  /* Fiesta Navy D, h1 chính, surface inverse */
  --sv-sys-navy-steel:     #04395E;  /* Fiesta Navy M, lede subtitle */
  --sv-sys-charcoal:       #1D1117;  /* Charcoal — office interior accent */
  --sv-sys-text-logo:      #303030;  /* Ink — official logo text color */

  /* Brand tagline — pinned official */
  /* "SINHVU · Shaping Brand Identity" (short) */
  /* "We shape brands with strategy, creativity and system." (long) */

  /* Brand 3 pillars — pinned */
  /* STRATEGY · CREATIVITY · SYSTEM */

}