/**
 * GenNova Design Tokens — Apple neutral palette
 * Single source of truth for colors, spacing, radius. Load before gn-layout, gn-content, gennova, gn-primitives.
 *
 * Deprecated legacy hex (do not use in templates): #3b5bdb, #e2e4ed, #8b8fa8, #2d3047
 */
:root {
  /* ── Primary = accent (Apple blue) ── */
  --gn-primary:           #0071e3;
  --gn-primary-hover:     #0077ed;
  --gn-primary-active:    #006edb;
  --gn-primary-rgb:       0, 113, 227;

  /* ── Background ── */
  --gn-bg-page:           #f5f5f7;
  --gn-bg-surface:        #ffffff;
  --gn-bg-muted:          #fafafa;
  --gn-bg-content:        #f5f5f7;

  /*
   * Chữ — một nguồn cho dashboard:
   * --gn-text          nội dung / nhãn / menu (mặc định mọi vùng)
   * --gn-text-muted    phụ đề, meta, header bảng
   * --gn-on-primary    chỉ chữ trên nút primary / nền accent đậm (≠ chữ thường)
   */
  --gn-text:              #1d1d1f;
  --gn-text-muted:        #86868b;

  /* ── Border ── */
  --gn-border:            #d2d2d7;
  --gn-border-subtle:     #e8e8ed;
  --gn-border-width:      1px;
  --gn-border-width-tab:  2px;

  /* ── Semantic ── */
  --gn-success:           #34c759;
  --gn-error:             #ff3b30;
  --gn-warning:           #ff9500;
  --gn-info:              #0071e3;

  /* Chữ trên nút filled — off-white, tránh #fff chói trên nền xanh */
  --gn-on-primary:        #f5f5f7;

  /* ── Buttons — Apple (tinted default, filled for CTA/modal) ── */
  --gn-btn-font-weight:   500;
  --gn-btn-filled-bg:     var(--gn-primary);
  --gn-btn-filled-fg:     var(--gn-on-primary);
  --gn-btn-filled-hover-bg: var(--gn-primary-hover);
  --gn-btn-filled-active-bg: var(--gn-primary-active);
  --gn-btn-filled-border: var(--gn-primary);
  --gn-btn-tint-bg:       color-mix(in srgb, var(--gn-primary) 10%, var(--gn-bg-surface));
  --gn-btn-tint-fg:       var(--gn-primary);
  --gn-btn-tint-border:   color-mix(in srgb, var(--gn-primary) 18%, var(--gn-border));
  --gn-btn-tint-hover-bg: color-mix(in srgb, var(--gn-primary) 15%, var(--gn-bg-surface));
  --gn-btn-tint-hover-border: color-mix(in srgb, var(--gn-primary) 28%, var(--gn-border));
  --gn-btn-focus-ring:    color-mix(in srgb, var(--gn-primary) 20%, transparent);

  /* ── Semantic backgrounds (color-mix, dịu mắt) ── */
  --gn-success-bg:        color-mix(in srgb, var(--gn-success) 14%, var(--gn-bg-surface));
  --gn-error-bg:          color-mix(in srgb, var(--gn-error) 14%, var(--gn-bg-surface));
  --gn-warning-bg:        color-mix(in srgb, var(--gn-warning) 16%, var(--gn-bg-surface));
  --gn-info-bg:           color-mix(in srgb, var(--gn-info) 14%, var(--gn-bg-surface));

  /* ── Spacing — base 4px ── */
  --gn-space-1:           4px;
  --gn-space-2:           8px;
  --gn-space-3:           12px;
  --gn-space-4:           16px;
  --gn-space-5:           20px;
  --gn-space-6:           24px;
  --gn-space-8:           32px;

  /* ── Layout shell (sidebar + main + stack) ── */
  --gn-topnav-h:          60px;
  --gn-layout-max-width:  1280px;
  --gn-layout-main-padding: var(--gn-space-6);
  --gn-layout-main-padding-md: var(--gn-space-4);
  --gn-layout-main-padding-sm: var(--gn-space-3);

  /* ── Responsive breakpoints (match Bootstrap .98 variants) ── */
  --gn-bp-sm: 575.98px;
  --gn-bp-md: 767.98px;
  --gn-bp-lg: 991.98px;
  --gn-layout-bar-padding-x: var(--gn-space-6);
  --gn-layout-bar-padding-y: var(--gn-space-3);
  --gn-layout-footer-padding: var(--gn-space-5) var(--gn-space-6) var(--gn-space-4);
  --gn-layout-stack-gap:  var(--gn-space-5);
  --gn-layout-section-gap: var(--gn-space-6);
  --gn-layout-block-gap:  var(--gn-space-5);
  --gn-card-header-pb:    var(--gn-space-3);
  --gn-card-toolbar-py:   var(--gn-space-2);
  --gn-card-toolbar-px:   var(--gn-space-5);

  /* ── Radius ── */
  --gn-radius-sm:         6px;
  --gn-radius:            8px;
  --gn-radius-lg:         12px;
  --gn-radius-xl:         16px;
  --gn-radius-pill:       999px;

  /* ── Shadows — Apple subtle ── */
  --gn-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.04);
  --gn-shadow-md:         0 2px 8px rgba(0, 0, 0, 0.06);

  /* ── Surface on-surface (true white card fill; do NOT use --gn-white for text) ── */
  --gn-on-surface:        #ffffff;

  /* ── Landing (gn-landing.css) ── */
  --gn-dark:              var(--gn-text);
  --gn-dark-2:            #2c2c2e;
  --gn-dark-3:            #3a3a3c;
  --gn-muted:             var(--gn-text-muted);
  --gn-muted-2:           #98989d;
  /* Alias for muted bg only — never use as text color */
  --gn-white:             var(--gn-bg-muted);
  --gn-primary-h:         var(--gn-primary-hover);
  --gn-accent:            var(--gn-info);
  --gn-border-dark:       #38383a;

  /* ── Brand / integration chips — neutral Apple (không rainbow theo nền tảng) ── */
  --gn-c-brand-fg:        var(--gn-text-muted);
  --gn-c-brand-bg:        var(--gn-bg-muted);
  --gn-c-brand-border:    var(--gn-border-subtle);
  --gn-c-nhanh:           var(--gn-c-brand-fg);
  --gn-c-nhanh-bg:        var(--gn-c-brand-bg);
  --gn-c-haravan:         var(--gn-c-brand-fg);
  --gn-c-haravan-bg:      var(--gn-c-brand-bg);
  --gn-c-amis:            var(--gn-c-brand-fg);
  --gn-c-amis-bg:         var(--gn-c-brand-bg);
  --gn-c-amount:          var(--gn-text);
  --gn-c-code:            var(--gn-text);
  --gn-c-code-bg:         var(--gn-border-subtle);

  /* Logo đối tác (chỉ icon/SVG — không dùng làm màu UI chính) */
  --gn-partner-haravan:   #7a9e3a;

  /* JSON / log terminal — luôn nền tối + chữ sáng */
  --gn-json-terminal-bg:    #1c1c1e;
  --gn-json-terminal-fg:    #f5f5f7;
  --gn-json-terminal-border: rgba(152, 152, 157, 0.28);

  /* ── Legacy aliases (gn-content, gn-layout, components) ── */
  --gn-c-card-bg:         var(--gn-bg-surface);
  --gn-c-card-border:     var(--gn-border);
  --gn-c-card-radius:     var(--gn-radius);
  --gn-c-card-padding:    var(--gn-space-5);
  --gn-c-card-padding-mobile: var(--gn-space-3);
  --gn-c-card-padding-compact: var(--gn-space-3) var(--gn-space-5);

  --gn-c-header-color:    var(--gn-text-muted);
  --gn-c-header-size:     11px;
  --gn-c-header-weight:   700;

  --gn-c-text:            var(--gn-text);
  --gn-c-text-muted:      var(--gn-text-muted);
  --gn-c-text-primary:    var(--gn-text);

  --gn-c-divider:         var(--gn-border);
  --gn-c-aside-bg:        var(--gn-bg-muted);
  --gn-c-context-bg:      color-mix(in srgb, var(--gn-primary) 10%, var(--gn-bg-surface));
  --gn-c-context-color:   var(--gn-primary);
  --gn-c-primary:         var(--gn-primary);

  --gn-c-gap:             var(--gn-layout-stack-gap);
  --gn-c-gap-sm:          var(--gn-space-3);

  --gn-c-save-bar-bg:     var(--gn-bg-muted);
  --gn-c-save-bar-border: var(--gn-border);

  --gn-c-status-active:   var(--gn-success);
  --gn-c-status-inactive: var(--gn-error);
  --gn-c-status-pending:  var(--gn-warning);
  --gn-c-status-info:     var(--gn-info);

  --gn-c-bg-card:         var(--gn-bg-surface);
  --gn-c-border:          var(--gn-border);
  --gn-c-bg:              var(--gn-bg-surface);
  --gn-c-surface:         var(--gn-c-card-bg);
  --gn-c-surface-elevated: var(--gn-c-card-bg);
  --gn-c-inset-bg:        var(--gn-bg-muted);

  --gn-bg:                var(--gn-bg-muted);

  /* Layout (gn-layout.css references these) ── */
  --gn-sidebar-bg:        var(--gn-bg-surface);
  --gn-sidebar-border:    var(--gn-border);
  --gn-sidebar-text:      var(--gn-text);
  --gn-sidebar-text-muted: var(--gn-text-muted);
  --gn-sidebar-active-bg: var(--gn-c-context-bg);
  --gn-sidebar-active-color: var(--gn-primary);
  --gn-sidebar-active-bar: var(--gn-primary);
  --gn-sidebar-hover-bg:  color-mix(in srgb, var(--gn-border) 40%, var(--gn-bg-surface));

  --gn-content-bg:        var(--gn-bg-content);
  --gn-topnav-bg:         var(--gn-bg-surface);
  --gn-topnav-border:     var(--gn-border);

  /* Font scale (theme provider sets data-font-size on body) */
  --gn-font-scale:        1;

  /*
   * Typography scale — nhân với --gn-font-scale (Cài đặt > Giao diện).
   */
  --gn-font-caption:          calc(12px * var(--gn-font-scale));
  --gn-font-ui-sm:            calc(13px * var(--gn-font-scale));
  --gn-font-card-subtitle:    calc(12px * var(--gn-font-scale));
  --gn-font-card-title:       calc(14px * var(--gn-font-scale));
  --gn-font-toolbar-title:    calc(13px * var(--gn-font-scale));
  --gn-font-micro:            calc(11px * var(--gn-font-scale));
  --gn-font-2xs:              calc(10px * var(--gn-font-scale));
  --gn-font-section-title-text: calc(13px * var(--gn-font-scale));
  --gn-font-section-title-sub:  calc(12px * var(--gn-font-scale));
  --gn-font-page-desc:        calc(13px * var(--gn-font-scale));
  --gn-font-page-title:       calc(20px * var(--gn-font-scale));
  --gn-font-modal-title:      calc(17px * var(--gn-font-scale));
  --gn-font-modal-body:       calc(13px * var(--gn-font-scale));
  --gn-font-modal-body-dense: calc(12.5px * var(--gn-font-scale));
  --gn-font-body:             calc(1rem * var(--gn-font-scale));
  --gn-font-h1:               calc(22px * var(--gn-font-scale));
  --gn-font-h2:               calc(18px * var(--gn-font-scale));
  --gn-font-h3:               calc(16px * var(--gn-font-scale));
  --gn-font-h4:               calc(14px * var(--gn-font-scale));
  --gn-font-h5:               calc(13px * var(--gn-font-scale));
  --gn-font-h6:               calc(12px * var(--gn-font-scale));
}

body[data-font-size="small"] {
  --gn-font-scale:       0.9;
  --gn-c-header-size:    calc(11px * 0.9);
}
body[data-font-size="large"] {
  --gn-font-scale:       1.15;
  --gn-c-header-size:    calc(11px * 1.15);
}

body.gn-layout {
  font-size: var(--gn-font-body);
}

/*
 * Dark theme (body[data-theme="dark"])
 *
 * Chữ theo Apple HIG / iOS semantic labels:
 *   --gn-ink           base #EBEBF5 (label family)
 *   --gn-text-emphasis ~84% ink — tiêu đề, nhấn mạnh (không dùng #FFF body-wide)
 *   --gn-text          ~70% ink — nội dung thường (tương đương label pha nền)
 *   --gn-text-muted    ~50% ink — secondaryLabel
 *   --gn-text-subtle   ~32% ink — tertiaryLabel / placeholder
 * Accent: xanh xám (không dùng system #0A84FF). Nút filled = nền pha surface, không khối neon.
 */
body[data-theme="dark"] {
  --gn-ink:              #ebebf5;

  /* Accent gốc — slate blue */
  --gn-primary:          #4a7a96;
  --gn-primary-hover:    #5a8aa6;
  --gn-primary-active:   #3d667d;
  --gn-primary-rgb:      74, 122, 150;
  --gn-info:             #567f97;
  --gn-link:             #628da5;
  --gn-link-hover:       #729bb3;
  --gn-on-primary:       #ebebf5;

  /* Filled (Lưu, modal OK) — nền dịu + chữ emphasis, không #0A84FF + trắng */
  --gn-btn-filled-bg:       color-mix(in srgb, var(--gn-primary) 36%, var(--gn-bg-page));
  --gn-btn-filled-fg:       var(--gn-text-emphasis);
  --gn-btn-filled-hover-bg: color-mix(in srgb, var(--gn-primary) 46%, var(--gn-bg-page));
  --gn-btn-filled-active-bg: color-mix(in srgb, var(--gn-primary) 30%, var(--gn-bg-page));
  --gn-btn-filled-border:   color-mix(in srgb, var(--gn-primary) 26%, var(--gn-border));

  /* Tinted (toolbar .btn-primary) — gần neutral, hint xanh nhẹ */
  --gn-btn-tint-bg:         color-mix(in srgb, var(--gn-primary) 5%, var(--gn-bg-surface));
  --gn-btn-tint-fg:         color-mix(in srgb, var(--gn-link) 55%, var(--gn-text));
  --gn-btn-tint-border:     color-mix(in srgb, var(--gn-primary) 16%, var(--gn-border));
  --gn-btn-tint-hover-bg:   color-mix(in srgb, var(--gn-primary) 10%, var(--gn-bg-surface));
  --gn-btn-tint-hover-border: color-mix(in srgb, var(--gn-primary) 22%, var(--gn-border));
  --gn-btn-focus-ring:      color-mix(in srgb, var(--gn-primary) 18%, transparent);

  --gn-bg-page:          #1c1c1e;
  --gn-bg-surface:       #2c2c2e;
  --gn-bg-muted:         #2c2c2e;
  --gn-bg-content:       #3a3a3c;

  --gn-text-emphasis:    color-mix(in srgb, var(--gn-ink) 84%, var(--gn-bg-surface));
  --gn-text:             color-mix(in srgb, var(--gn-ink) 70%, var(--gn-bg-surface));
  --gn-text-muted:       color-mix(in srgb, var(--gn-ink) 50%, var(--gn-bg-surface));
  --gn-text-subtle:      color-mix(in srgb, var(--gn-ink) 32%, var(--gn-bg-surface));
  --gn-border:           #38383a;
  --gn-border-subtle:    #48484a;

  --gn-c-card-bg:        #2c2c2e;
  --gn-c-card-border:    #38383a;
  --gn-c-header-color:   var(--gn-text-muted);
  --gn-c-text:           var(--gn-text);
  --gn-c-text-muted:     var(--gn-text-muted);
  --gn-c-text-primary:   var(--gn-text);
  --gn-c-divider:        #38383a;
  --gn-c-bg-card:        #2c2c2e;
  --gn-c-border:         #38383a;
  --gn-c-bg:             var(--gn-bg-surface);
  --gn-c-surface:        var(--gn-c-card-bg);
  --gn-c-surface-elevated: var(--gn-c-card-bg);
  --gn-c-inset-bg:       color-mix(in srgb, var(--gn-bg-page) 42%, var(--gn-c-card-bg));
  --gn-c-context-bg:     color-mix(in srgb, var(--gn-primary) 12%, var(--gn-bg-surface));
  --gn-c-code:           var(--gn-text);
  --gn-c-code-bg:        #3a3a3c;

  --gn-json-terminal-bg:    #000000;
  --gn-json-terminal-fg:    var(--gn-text);
  --gn-json-terminal-border: rgba(152, 152, 157, 0.32);

  --gn-success-bg:       color-mix(in srgb, var(--gn-success) 22%, var(--gn-bg-surface));
  --gn-error-bg:         color-mix(in srgb, var(--gn-error) 22%, var(--gn-bg-surface));
  --gn-warning-bg:       color-mix(in srgb, var(--gn-warning) 24%, var(--gn-bg-surface));
  --gn-info-bg:          color-mix(in srgb, var(--gn-info) 14%, var(--gn-bg-surface));

  --gn-bg:               var(--gn-bg-muted);
  --gn-sidebar-bg:       #2c2c2e;
  --gn-sidebar-border:   #38383a;
  --gn-sidebar-text:     var(--gn-text);
  --gn-sidebar-text-muted: var(--gn-text-muted);
  --gn-sidebar-hover-bg: color-mix(in srgb, var(--gn-border) 50%, var(--gn-bg-surface));
  --gn-sidebar-active-bg: var(--gn-c-context-bg);
  --gn-sidebar-active-color: var(--gn-link);
  --gn-sidebar-active-bar: var(--gn-link);
  --gn-content-bg:       #3a3a3c;
  --gn-topnav-bg:        #2c2c2e;
  --gn-topnav-border:    #38383a;
  --gn-c-save-bar-bg:    var(--gn-bg-muted);
  --gn-c-save-bar-border: var(--gn-border);
  --gn-c-aside-bg:       var(--gn-bg-muted);
}