/**
 * GenNova Design Tokens — Saleor-style palette
 * Single source of truth for colors. Load before gn-layout, gn-content, gennova, gn-bootstrap-overrides.
 */
:root {
  /* ── Primary = màu chính logo / accent (indigo) ── */
  --gn-primary:           #6366f1;
  --gn-primary-hover:     #4f46e5;
  --gn-primary-active:    #4338ca;
  --gn-primary-rgb:       99, 102, 241;

  /* ── Background ── */
  --gn-bg-page:           #f1f5f9;
  --gn-bg-surface:        #ffffff;
  --gn-bg-muted:          #f8fafc;
  --gn-bg-content:        #f1f5f9;

  /* ── Text ── */
  --gn-text:              #0f172a;
  --gn-text-muted:        #64748b;

  /* ── Border ── */
  --gn-border:            #e2e8f0;
  --gn-border-subtle:     #f1f5f9;

  /* ── Semantic ── */
  --gn-success:           #10b981;
  --gn-error:             #ef4444;
  --gn-warning:           #f59e0b;
  --gn-info:              #3b82f6;

  /* ── Semantic backgrounds (light) ── */
  --gn-success-bg:        #d1fae5;
  --gn-error-bg:          #fee2e2;
  --gn-warning-bg:        #fef3c7;
  --gn-info-bg:           #dbeafe;

  /* ── Radius ── */
  --gn-radius:            8px;
  --gn-radius-sm:         6px;
  --gn-radius-lg:         12px;

  /* ── Landing (gn-landing.css) ── */
  --gn-dark:              var(--gn-text);
  --gn-dark-2:             #1e293b;
  --gn-dark-3:             #334155;
  --gn-muted:              var(--gn-text-muted);
  --gn-muted-2:            #94a3b8;
  --gn-white:              var(--gn-bg-muted);
  --gn-primary-h:          var(--gn-primary-hover);
  --gn-accent:             var(--gn-info);
  --gn-border-dark:        #1e293b;

  /* ── Brand / integration (order chips, alerts) ── */
  --gn-c-nhanh:           var(--gn-warning);
  --gn-c-nhanh-bg:        var(--gn-warning-bg);
  --gn-c-haravan:         var(--gn-info);
  --gn-c-haravan-bg:      var(--gn-info-bg);
  --gn-c-amis:            var(--gn-success);
  --gn-c-amis-bg:         var(--gn-success-bg);
  --gn-c-amount:          var(--gn-text);
  --gn-c-code:            #374151;
  --gn-c-code-bg:         var(--gn-border-subtle);

  /* ── 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:    20px;

  --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:     #eef1ff;
  --gn-c-context-color:  var(--gn-primary);
  --gn-c-primary:        var(--gn-primary);

  --gn-c-gap:             16px;
  --gn-c-gap-sm:         12px;

  --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);

  /* Task-row, connect-banner, etc. ── */
  --gn-bg:               var(--gn-bg-muted);
  --gn-text-muted:       var(--gn-text-muted);

  /* Layout (gn-layout.css references these; values from tokens) ── */
  --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:  #f0f2f8;

  --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;
}

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);
}

/* Áp dụng cỡ chữ lên toàn trang (tính năng Cỡ chữ trong Cài đặt > Giao diện) */
body.gn-layout {
  font-size: calc(1rem * var(--gn-font-scale));
}

/* Dark theme (theme provider sets data-theme="dark" on body) */
body[data-theme="dark"] {
  --gn-bg-page:         #0f172a;
  --gn-bg-surface:       #1e293b;
  --gn-bg-muted:         #1e293b;
  --gn-bg-content:       #334155;
  --gn-text:             #f1f5f9;
  --gn-text-muted:       #94a3b8;
  --gn-border:           #334155;
  --gn-border-subtle:     #475569;
  --gn-c-card-bg:        #1e293b;
  --gn-c-header-color:   #94a3b8;
  --gn-c-text:           #f1f5f9;
  --gn-c-text-muted:     #94a3b8;
  --gn-c-divider:        #334155;
  --gn-sidebar-bg:       #1e293b;
  --gn-sidebar-border:   #334155;
  --gn-sidebar-text:     #f1f5f9;
  --gn-sidebar-text-muted: #94a3b8;
  --gn-sidebar-hover-bg: #334155;
  --gn-content-bg:       #334155;
  --gn-topnav-bg:        #1e293b;
  --gn-topnav-border:     #334155;
}