/* ============================================================
   LÀM CHỦ TƯ DUY — Design Tokens
   Hệ: Editorial Warm (Ali fidelity) — nền kem + 5 accent playful
   + crisp hard shadow. Nguồn: 04_Resources/Design System — Marketing.
   Giữ tên biến cũ (--indigo-* / --pink-*) nhưng remap VALUE về đúng
   palette warm để style.css cũ chạy nguyên — mỗi biến đáp đúng 1 vai trò.
   ============================================================ */

/* ---- Fonts: SVN-Recoleta (heading 600/700) + SVN-Gilroy (body) ---- */
@font-face {
  font-family: "SVN-Recoleta";
  src: url("../assets/fonts/SVN-Recoleta-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "SVN-Recoleta";
  src: url("../assets/fonts/SVN-Recoleta-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../assets/fonts/SVN-Gilroy-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../assets/fonts/SVN-Gilroy-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../assets/fonts/SVN-Gilroy-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../assets/fonts/SVN-Gilroy-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  /* ---- Foreground: mực undertone tím (KHÔNG đen thuần) ---- */
  --ink:   #1b1624;
  --ink-2: #54505b;
  --ink-3: #76737c;
  --ink-4: #8d8a91;

  /* ---- Surface: thang kem ấm ---- */
  --surface-0: #ffffff;
  --surface-1: #f9f6f3;
  --surface-2: #f3ede9;   /* page background chính — kem ấm */
  --surface-3: #ece5e1;

  /* ---- 5 accent playful (main character) ---- */
  --mint:      #79d287;   /* CTA chính */
  --mint-hover:#6bc77a;
  --mint-soft: #b3e8bb;
  --coral:     #fd976d;   /* underline nhấn, emphasis */
  --coral-600: #ef7a49;   /* coral đậm cho text trên nền sáng */
  --coral-soft:#fdc7b1;
  --yellow:    #fdd46b;   /* arrow/nav, số thứ tự, spotlight */
  --yellow-soft:#fee7a8;
  --sky:       #5dcdf1;   /* hyperlink, info */
  --lavender:  #c9b1fb;   /* badge decorative, illustration accent */
  --lavender-soft:#e3d6fd;

  /* ---- REMAP tên biến cũ → vai trò warm (để style.css cũ chạy) ---- */
  --indigo-900: var(--ink);        /* heading = mực */
  --indigo-700: var(--ink);        /* dark section = mực */
  --indigo-600: var(--ink);
  --indigo-500: var(--sky);        /* link = sky */
  --indigo-300: var(--lavender);   /* decorative = lavender */
  --indigo-100: var(--yellow);     /* spot: số tròn, arrow = yellow */

  --pink-600: var(--coral-600);
  --pink-500: var(--coral);        /* underline, emphasis = coral */
  --pink-300: var(--coral-soft);
  --pink-200: var(--mint);         /* CTA bg = mint */
  --pink-200-hover: var(--mint-hover);
  --pink-50:  var(--lavender-soft);/* badge tint = lavender nhạt */

  /* ---- Alpha ladder (cấu trúc từ mực) ---- */
  --hairline:     rgba(27, 22, 36, 0.10);
  --hairline-row: rgba(27, 22, 36, 0.06);
  --row-hover:    rgba(27, 22, 36, 0.03);
  --label-45:     rgba(27, 22, 36, 0.45);

  /* ---- Semantic ---- */
  --positive: #00d084;
  --destructive: #cf2e2e;
  --warning: #ff6900;
  --info: #0693e3;

  /* ---- Vai trò khóa ---- */
  --bg:           var(--surface-2);
  --bg-dark:      var(--ink);
  --text:         var(--ink);
  --text-muted:   var(--ink-2);
  --text-on-dark: #f5f1ec;         /* warm silver trên nền mực */
  --heading:      var(--ink);
  --cta-bg:       var(--mint);
  --cta-bg-hover: var(--mint-hover);
  --underline:    var(--coral);
  --link:         var(--sky);

  /* ---- Chữ ---- */
  --font-display: "SVN-Recoleta", Georgia, serif;   /* 600/700 only */
  --font-body: "SVN-Gilroy", Arial, sans-serif;

  --text-hero: clamp(3rem, 3rem + ((1vw - 0.2rem) * 4.09), 5.25rem);   /* 48→84 */
  --text-h2:   clamp(2rem, 2rem + ((1vw - 0.2rem) * 3.64), 4rem);      /* 32→64 */
  --text-h3:   clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1), 1.75rem);
  --text-body: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.23), 1.125rem);  /* 16→18 */
  --text-small: 0.9375rem;                                             /* 15 */
  --leading-body: 1.6;             /* tiếng Việt safe */

  /* ---- Khối: radius Ali ---- */
  --radius-card:   24px;   /* medium — card default */
  --radius-anchor: clamp(1.25rem, 2.5vw, 2rem);  /* large — hero/pricing */
  --radius-input:  8px;
  --radius-pill:   9999px;

  /* ---- Elevation: crisp hard shadow (chữ ký) ---- */
  --shadow-crisp:      6px 6px 0 #000;
  --shadow-crisp-sm:   4px 4px 0 #000;
  --shadow-crisp-hover:8px 8px 0 #000;
  --shadow-crisp-mint: 6px 6px 0 var(--mint);
  --shadow-crisp-yellow: 6px 6px 0 var(--yellow);
  /* alias cũ */
  --anchor-shadow: var(--shadow-crisp);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick: 0.15s;
  --dur-reveal: 0.45s;

  /* ---- Layout (Ali) ---- */
  --section-y:       clamp(2rem, 7.5vw, 6rem);
  --section-y-tight: clamp(2rem, 6.5vw, 4rem);
  --container:       1200px;
  --container-pad:   clamp(1.25rem, 4vw, 3rem);

  --z-nav: 50;
  --z-modal: 100;
}