/* THE NEXOVA design tokens — sinh tu nex-design-system
 * Nguon: nex-design-system/css/variables.css @ 77522ac
 * Cap nhat: ./scripts/sync-design-system.sh roi copy lai file nay.
 *
 * File nay CHI khai bao bien. No khong ap dung style nao, nen nap vao la
 * khong doi hien thi. Muc dich: moi CSS sau nay viet duoc var(--nx-*) thay vi
 * hardcode hex, va khi brand doi mau thi sua mot cho.
 */
/* ==========================================================================
   THE NEXOVA — Design Tokens as CSS Custom Properties
   Single source of truth for runtime styling. Generated from tokens/tokens.json.
   Import this first, before any component styles.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --nx-color-primary: #1F1828;            /* Deep Aubergine */
  --nx-color-on-primary: #F4F1EA;

  /* ---- Aubergine scale ------------------------------------------------ */
  --nx-aubergine-50:  #F4F2F6;
  --nx-aubergine-100: #E4E0EA;
  --nx-aubergine-200: #C6BFD2;
  --nx-aubergine-300: #A093B4;
  --nx-aubergine-400: #6E5D86;
  --nx-aubergine-500: #4A3A63;
  --nx-aubergine-600: #362A49;
  --nx-aubergine-700: #2A2039;
  --nx-aubergine-800: #1F1828;
  --nx-aubergine-900: #15101B;

  /* ---- Fire scale (accent) ------------------------------------------- */
  --nx-fire-50:  #FFF1E6;
  --nx-fire-100: #FFDCC2;
  --nx-fire-200: #FFB980;
  --nx-fire-300: #FF9A3D;
  --nx-fire-400: #FF7A00;                 /* Fire Orange — gradient start */
  --nx-fire-500: #F5590A;
  --nx-fire-600: #E63200;
  --nx-fire-700: #D60000;                 /* Fire Red — gradient end */
  --nx-fire-800: #A80505;
  --nx-fire-900: #7A0505;

  /* ---- Neutral (warm) ------------------------------------------------- */
  --nx-neutral-0:   #FFFFFF;
  --nx-neutral-50:  #FAF8F3;
  --nx-neutral-100: #F5F5F5;              /* Canvas */
  --nx-neutral-200: #E7E2D8;
  --nx-neutral-300: #D4CEC1;
  --nx-neutral-400: #B0A99A;
  --nx-neutral-500: #8A8375;
  --nx-neutral-600: #635D51;
  --nx-neutral-700: #454036;
  --nx-neutral-800: #2B271F;
  --nx-neutral-900: #242323;

  /* ---- Semantic ------------------------------------------------------- */
  --nx-success: #2E9E5B;
  --nx-warning: #E8A400;
  --nx-danger:  #D60000;
  --nx-info:    #3A6EA5;

  /* ---- Signature gradients ------------------------------------------- */
  --nx-gradient-fire: linear-gradient(135deg, var(--nx-fire-400) 0%, var(--nx-fire-700) 100%);
  --nx-gradient-fire-h: linear-gradient(90deg, var(--nx-fire-400) 0%, var(--nx-fire-700) 100%);

  /* ---- Semantic surface roles (light theme) -------------------------- */
  --nx-bg:            var(--nx-neutral-100);
  --nx-surface:       var(--nx-neutral-0);
  --nx-surface-alt:   var(--nx-neutral-50);
  --nx-border:        var(--nx-neutral-300);
  --nx-text:          var(--nx-aubergine-800);
  --nx-text-muted:    var(--nx-neutral-600);
  --nx-accent:        var(--nx-fire-500);
  --nx-focus-ring:    var(--nx-fire-400);

  /* ---- Typography ----------------------------------------------------- */
  --nx-font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --nx-font-body:    "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --nx-font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --nx-weight-regular: 400;
  --nx-weight-medium: 500;
  --nx-weight-semibold: 600;
  --nx-weight-bold: 700;
  --nx-weight-extrabold: 800;

  --nx-text-xs:  12px;
  --nx-text-sm:  14px;
  --nx-text-base:16px;
  --nx-text-lg:  18px;
  --nx-text-xl:  20px;
  --nx-text-2xl: 24px;
  --nx-text-3xl: 30px;
  --nx-text-4xl: 36px;
  --nx-text-5xl: 48px;
  --nx-text-6xl: 60px;
  --nx-text-7xl: 72px;

  --nx-leading-tight: 1.1;
  --nx-leading-snug: 1.25;
  --nx-leading-normal: 1.5;
  --nx-leading-relaxed: 1.65;

  --nx-tracking-tight: -0.02em;
  --nx-tracking-normal: 0em;
  --nx-tracking-wide: 0.04em;
  --nx-tracking-wider: 0.12em;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --nx-space-0: 0px;
  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 12px;
  --nx-space-4: 16px;
  --nx-space-5: 20px;
  --nx-space-6: 24px;
  --nx-space-8: 32px;
  --nx-space-10: 40px;
  --nx-space-12: 48px;
  --nx-space-16: 64px;
  --nx-space-20: 80px;
  --nx-space-24: 96px;

  /* ---- Radius --------------------------------------------------------- */
  --nx-radius-sm: 6px;
  --nx-radius-md: 10px;
  --nx-radius-lg: 16px;
  --nx-radius-xl: 24px;
  --nx-radius-full: 9999px;

  /* ---- Elevation ------------------------------------------------------ */
  --nx-shadow-sm: 0 1px 2px rgba(31, 24, 40, 0.06);
  --nx-shadow-md: 0 4px 12px rgba(31, 24, 40, 0.10);
  --nx-shadow-lg: 0 12px 32px rgba(31, 24, 40, 0.14);
  --nx-shadow-glow-fire: 0 0 24px rgba(255, 122, 0, 0.45);

  /* ---- Motion --------------------------------------------------------- */
  --nx-duration-fast: 120ms;
  --nx-duration-normal: 220ms;
  --nx-duration-slow: 400ms;
  --nx-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --nx-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

  /* ---- Layout: slides & print documents (presentation.css) ----------- */
  --nx-slide-width: 1280px;
  --nx-slide-height: 720px;
  --nx-slide-print-width: 33.87cm;   /* 1280px @ 96dpi, 16:9 */
  --nx-slide-print-height: 19.05cm;  /* 720px @ 96dpi */
  --nx-page-a4-width: 210mm;
  --nx-page-a4-height: 297mm;
  --nx-page-a4-margin: 18mm 16mm;
}

/* ==========================================================================
   Dark theme — apply on <html data-theme="dark"> or via prefers-color-scheme
   Aubergine becomes the canvas; fire keeps its punch.
   ========================================================================== */
:root[data-theme="dark"] {
  --nx-bg:          var(--nx-aubergine-900);
  --nx-surface:     var(--nx-aubergine-800);
  --nx-surface-alt: var(--nx-aubergine-700);
  --nx-border:      var(--nx-aubergine-600);
  --nx-text:        var(--nx-neutral-100);
  --nx-text-muted:  var(--nx-aubergine-300);
  --nx-accent:      var(--nx-fire-400);
  --nx-focus-ring:  var(--nx-fire-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nx-bg:          var(--nx-aubergine-900);
    --nx-surface:     var(--nx-aubergine-800);
    --nx-surface-alt: var(--nx-aubergine-700);
    --nx-border:      var(--nx-aubergine-600);
    --nx-text:        var(--nx-neutral-100);
    --nx-text-muted:  var(--nx-aubergine-300);
    --nx-accent:      var(--nx-fire-400);
    --nx-focus-ring:  var(--nx-fire-400);
  }
}