/**
 * GM Design Tokens — canonical source (ADR-004)
 * Import first on all GM surfaces; surface packs alias these tokens.
 */
:root {
  /* Documented semantic aliases (prefer --gm-* canonical names in new CSS) */
  /* --gm-color-primary: portal → --gm-magenta; staff → --gm-yellow */
  /* --gm-color-background: --gm-bg */
  /* --gm-color-surface: --gm-card */
  /* --gm-color-success: --gm-finance */
  /* --gm-color-danger: --gm-ap */
  /* Surface `ap` (accounts payable) uses finanzas green accent — same as cuentacorriente */

  /* Brand CMYK */
  --gm-cyan: #00bcd4;
  --gm-magenta: #e65297;
  --gm-accent-pink: var(--gm-magenta);
  --gm-yellow: #f6d76b;
  --gm-accent-yellow: var(--gm-yellow);

  /* Surfaces */
  --gm-black: #0a0a0a;
  --gm-bg: var(--gm-black);
  --gm-dark: #1a1a1a;
  --gm-card: #111111;
  --gm-admin-surface: #141414;
  --gm-admin-card: #111111;
  --gm-admin-border: rgba(255, 255, 255, 0.08);

  /* Text */
  --gm-text: #f5f5f5;
  --gm-text-muted: #b0b0b0;
  --gm-gray: #6b7280;
  --gm-gray-light: #9ca3af;

  /* Semantic domain accents (surface / meaning, not role) */
  --gm-finance: #4ade80;
  --gm-finance-strong: #22c55e;
  --gm-finance-muted: rgba(74, 222, 128, 0.12);
  --gm-ap: #dc3545;
  --gm-ap-strong: #b91c1c;
  --gm-ap-muted: rgba(220, 53, 69, 0.12);
  --gm-ai: #a78bfa;
  --gm-ai-strong: #8b5cf6;
  --gm-ai-muted: rgba(167, 139, 250, 0.12);
  --gm-hhrr: #d6a8de;
  --gm-hhrr-strong: #c084c8;
  --gm-hhrr-muted: rgba(214, 168, 222, 0.14);
  --gm-orange: #c2410c;
  --gm-orange-muted: rgba(194, 65, 12, 0.12);

  /* State semantics */
  --gm-success: var(--gm-finance);
  --gm-warning: var(--gm-yellow);
  --gm-danger: var(--gm-ap);
  --gm-info: var(--gm-cyan);

  /* Layout tokens */
  --gm-radius-sm: 6px;
  --gm-radius-md: 10px;
  --gm-radius-lg: 14px;
  --gm-spacing-xs: 0.25rem;
  --gm-spacing-sm: 0.5rem;
  --gm-spacing-md: 1rem;
  --gm-spacing-lg: 1.5rem;
  --gm-spacing-xl: 2rem;
  --gm-border: rgba(255, 255, 255, 0.08);
  --gm-border-accent: rgba(230, 82, 151, 0.35);
  --gm-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --gm-shadow-accent: 0 4px 24px rgba(246, 215, 107, 0.08);

  /* Page portfolio background (1/3 viewport + fade) */
  --gm-page-bg-height: 33.33vh;
  --gm-page-bg-fade-color: var(--gm-bg);
  --gm-page-bg-fade-mid: rgba(0, 0, 0, 0.45);

  /* Gradients */
  --gm-gradient-brand: linear-gradient(
    135deg,
    rgba(0, 188, 212, 0.15) 0%,
    rgba(230, 82, 151, 0.12) 50%,
    rgba(246, 215, 107, 0.1) 100%
  );
  --gm-gradient-cyan: linear-gradient(165deg, #0a0a0a 0%, rgba(0, 188, 212, 0.08) 100%);
  --gm-gradient-magenta: linear-gradient(165deg, #0a0a0a 0%, rgba(230, 82, 151, 0.1) 100%);
  --gm-gradient-yellow: linear-gradient(165deg, #0a0a0a 0%, rgba(246, 215, 107, 0.08) 100%);
  --gm-gradient-finance: linear-gradient(165deg, #0a0a0a 0%, rgba(74, 222, 128, 0.08) 100%);
  --gm-gradient-ap: linear-gradient(165deg, #0a0a0a 0%, rgba(220, 53, 69, 0.08) 100%);
  --gm-gradient-ai: linear-gradient(165deg, #0a0a0a 0%, rgba(167, 139, 250, 0.1) 100%);
  --gm-gradient-hhrr: linear-gradient(165deg, #0a0a0a 0%, rgba(214, 168, 222, 0.12) 100%);
  --gm-gradient-admin: linear-gradient(165deg, #0a0a0a 0%, rgba(255, 255, 255, 0.03) 100%);
  --gm-dcc-rainbow: linear-gradient(
    90deg,
    var(--gm-magenta) 0%,
    var(--gm-yellow) 28%,
    var(--gm-cyan) 52%,
    var(--gm-finance) 76%,
    var(--gm-ai) 100%
  );
  --gm-dcc-rainbow-bar: linear-gradient(
    90deg,
    var(--gm-magenta) 0%,
    var(--gm-yellow) 25%,
    var(--gm-cyan) 50%,
    var(--gm-finance) 75%,
    var(--gm-ai) 100%
  );
  --gm-dcc-col-ideas: linear-gradient(135deg, #000 0%, var(--gm-magenta) 100%);
  --gm-dcc-col-backlog: linear-gradient(135deg, #000 0%, var(--gm-cyan) 100%);
  --gm-dcc-col-in-progress: linear-gradient(135deg, var(--gm-yellow) 0%, #a08600 22%, #3a3a3a 58%, var(--gm-black) 100%);
  --gm-dcc-col-verify: linear-gradient(135deg, #7c3aed 0%, var(--gm-ai) 100%);
  --gm-dcc-col-review: linear-gradient(135deg, var(--gm-ai) 0%, var(--gm-orange) 100%);
  --gm-dcc-col-ready: linear-gradient(135deg, #000 0%, #052e16 42%, #15803d 58%, #4ade80 100%);
  --gm-dcc-col-release: linear-gradient(135deg, var(--gm-cyan) 0%, var(--gm-finance) 100%);
  --gm-dcc-col-done: linear-gradient(135deg, #14532d 0%, #86efac 100%);
  --gm-dcc-col-blocked: linear-gradient(135deg, #991b1b 0%, var(--gm-danger) 100%);
  --gm-dcc-col-ideas-accent: var(--gm-magenta);
  --gm-dcc-col-backlog-accent: var(--gm-cyan);
  --gm-dcc-col-in-progress-accent: var(--gm-yellow);
  --gm-dcc-col-verify-accent: #7c3aed;
  --gm-dcc-col-review-accent: var(--gm-orange);
  --gm-dcc-col-ready-accent: var(--gm-finance);
  --gm-dcc-col-release-accent: var(--gm-cyan);
  --gm-dcc-col-done-accent: #86efac;
  --gm-dcc-col-blocked-accent: var(--gm-danger);
  --gm-dcc-type-feature: var(--gm-magenta);
  --gm-dcc-type-slice: var(--gm-cyan);
  --gm-dcc-type-bug: var(--gm-danger);
  --gm-dcc-type-improvement: var(--gm-cyan);
  --gm-dcc-type-tech-debt: var(--gm-orange);
  --gm-dcc-type-harness: var(--gm-ai);
  --gm-dcc-type-academy: var(--gm-yellow);
  --gm-dcc-type-mcp: var(--gm-cyan);
  --gm-dcc-type-documentation: var(--gm-text-muted);
  --gm-dcc-role-developer: var(--gm-dcc-rainbow);
  --gm-dcc-role-ceo: var(--gm-finance);
  --gm-dcc-role-staff: var(--gm-yellow);
  --gm-dcc-role-cliente: var(--gm-ai);
  --gm-dcc-role-interesado: var(--gm-orange);
  --gm-loading-bar-gradient: linear-gradient(
    90deg,
    var(--gm-cyan) 0%,
    var(--gm-accent-pink) 50%,
    var(--gm-accent-yellow) 100%
  );

  /* CTA button gradients (surface packs override --gm-btn-primary-gradient) */
  --gm-btn-primary-gradient: linear-gradient(135deg, var(--gm-magenta) 0%, var(--gm-yellow) 100%);
  --gm-btn-primary-gradient-hover: linear-gradient(135deg, #d14487 0%, #f0cc5a 100%);
  --gm-btn-success-gradient: linear-gradient(135deg, #16a34a 0%, var(--gm-success) 100%);
  --gm-btn-success-gradient-hover: linear-gradient(135deg, #15803d 0%, #86efac 100%);
  --gm-btn-warning-gradient: linear-gradient(135deg, #ca8a04 0%, var(--gm-warning) 100%);
  --gm-btn-warning-gradient-hover: linear-gradient(135deg, #a16207 0%, #fde68a 100%);
  --gm-btn-danger-gradient: linear-gradient(135deg, #991b1b 0%, var(--gm-danger) 100%);
  --gm-btn-danger-gradient-hover: linear-gradient(135deg, #7f1d1d 0%, #f87171 100%);
  --gm-btn-wa-gradient: linear-gradient(135deg, #128c7e 0%, #25d366 100%);
  --gm-btn-wa-gradient-hover: linear-gradient(135deg, #0f7a6e 0%, #20bd5a 100%);
  /* Landing: match gm-home-tab.active shells (Inicio magenta / Tienda cyan) */
  --gm-landing-cta-magenta: linear-gradient(135deg, #000 0%, var(--gm-magenta) 100%);
  --gm-landing-cta-magenta-hover: linear-gradient(135deg, #000 0%, #d14487 100%);
  --gm-landing-cta-magenta-shadow: 0 4px 16px rgba(230, 82, 151, 0.3);
  --gm-landing-cta-cyan: linear-gradient(135deg, #000 0%, var(--gm-cyan) 100%);
  --gm-landing-cta-cyan-hover: linear-gradient(135deg, #000 0%, #26c6da 100%);
  --gm-landing-cta-cyan-shadow: 0 4px 16px rgba(0, 188, 212, 0.35);
  --gm-btn-wa-industrial-gradient: linear-gradient(135deg, #000 0%, #0a3d34 45%, #128c7e 100%);
  --gm-btn-wa-industrial-gradient-hover: linear-gradient(135deg, #000 0%, #0d4a40 55%, #15967a 100%);
  /* Staff header quick actions — yellow → black (landing industrial CTA) */
  --gm-staff-industrial-gradient: linear-gradient(135deg, var(--gm-yellow) 0%, #a08600 22%, #3a3a3a 58%, var(--gm-black) 100%);
  --gm-staff-industrial-gradient-hover: linear-gradient(135deg, #f0cc5a 0%, #8a7200 22%, #4a4a4a 58%, #1a1a1a 100%);
  /* Finanzas / CEO — black → forest (bright tip reserved for accents/links) */
  --gm-finance-industrial-gradient: linear-gradient(135deg, #000 0%, #052e16 42%, #15803d 58%, #4ade80 100%);
  --gm-finance-industrial-gradient-hover: linear-gradient(135deg, #000 0%, #0d4a40 55%, #166534 62%, #86efac 100%);
  /* Muted — card headers + filled buttons (WA industrial: black → deep forest, no neon) */
  --gm-finance-industrial-gradient-muted: linear-gradient(135deg, #000 0%, #0a3d34 45%, #14532d 100%);
  --gm-finance-industrial-gradient-muted-hover: linear-gradient(135deg, #000 0%, #0d4a40 55%, #166534 100%);
  /* RRHH / empleados — black → plum → lilac (distinct from violet users/clients) */
  --gm-hhrr-industrial-gradient: linear-gradient(135deg, #000 0%, #3b1f45 42%, #8b5a9e 58%, #d6a8de 100%);
  --gm-hhrr-industrial-gradient-hover: linear-gradient(135deg, #000 0%, #4a2756 48%, #9b6aaf 62%, #e4c4ea 100%);
  --gm-hhrr-industrial-gradient-muted: linear-gradient(135deg, #000 0%, #3b1f45 45%, #6b3d7a 100%);
  --gm-hhrr-industrial-gradient-muted-hover: linear-gradient(135deg, #000 0%, #4a2756 55%, #7a4a8a 100%);
  /* Debt / alert rows — industrial red fading into black (not Bootstrap pastel warning) */
  --gm-ap-industrial-row-gradient: linear-gradient(
    90deg,
    #9f1239 0%,
    #7f1d1d 28%,
    #450a0a 58%,
    #0a0a0a 100%
  );
  --gm-ap-industrial-row-gradient-hover: linear-gradient(
    90deg,
    #be123c 0%,
    #991b1b 28%,
    #7f1d1d 55%,
    #111111 100%
  );
  /* Cuenta corriente debt rows — industrial green → black (CC accent, not AP red) */
  --gm-cc-industrial-row-gradient: linear-gradient(
    90deg,
    #15803d 0%,
    #14532d 28%,
    #052e16 58%,
    #0a0a0a 100%
  );
  --gm-cc-industrial-row-gradient-hover: linear-gradient(
    90deg,
    #22c55e 0%,
    #166534 28%,
    #14532d 55%,
    #111111 100%
  );
  /* Trello vista tabs — dark → lighter industrial (except Todos) */
  --gm-trello-tab-mis-gradient: linear-gradient(135deg, #000 0%, #0c4a6e 42%, #0284c7 100%);
  --gm-trello-tab-mis-gradient-hover: linear-gradient(135deg, #000 0%, #075985 55%, #38bdf8 100%);
  --gm-trello-tab-bloqueados-gradient: linear-gradient(135deg, #000 0%, #7f1d1d 42%, #dc3545 100%);
  --gm-trello-tab-bloqueados-gradient-hover: linear-gradient(135deg, #000 0%, #991b1b 55%, #f87171 100%);
  --gm-trello-tab-validacion-gradient: linear-gradient(135deg, #000 0%, #4c1d95 42%, #8b5cf6 100%);
  --gm-trello-tab-validacion-gradient-hover: linear-gradient(135deg, #000 0%, #5b21b6 55%, #a78bfa 100%);
  --gm-trello-vista-mis-glow: rgba(2, 132, 199, 0.28);
  --gm-trello-vista-bloqueados-glow: rgba(220, 53, 69, 0.28);
  --gm-trello-vista-validacion-glow: rgba(139, 92, 246, 0.28);

  /* Surface accent (default: staff yellow) */
  --gm-surface-accent: var(--gm-yellow);
  --gm-surface-accent-muted: rgba(246, 215, 107, 0.12);
  --gm-surface-accent-on: #0a0a0a;
  --gm-surface-gradient: var(--gm-gradient-yellow);
  --gm-on-success: #0a0a0a;
  --gm-on-warning: #0a0a0a;

  /* Primary CTA label on filled gradient buttons */
  --gm-btn-primary-fg: var(--gm-surface-accent-on, #ffffff);

  /* Card header gradients (aligned with landing CTAs; surfaces override --gm-header-gradient) */
  --gm-header-gradient: var(--gm-btn-primary-gradient);
  --gm-header-fg: #ffffff;
  --gm-header-gradient-success: linear-gradient(135deg, #15803d 0%, var(--gm-success) 100%);
  --gm-header-gradient-warning: linear-gradient(135deg, #ca8a04 0%, var(--gm-warning) 100%);
  --gm-header-gradient-danger: linear-gradient(135deg, #991b1b 0%, var(--gm-danger) 100%);
  --gm-header-gradient-info: linear-gradient(135deg, #0097a7 0%, var(--gm-cyan) 100%);
  --gm-header-gradient-neutral: linear-gradient(135deg, #424242 0%, #212121 100%);

  /* Nav dropdown top accent bar (90deg → black); surfaces override below */
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-magenta) 0%, var(--gm-black) 100%);

  /* Legacy aliases — migrate overlays to canonical names */
  --gm-admin-yellow: var(--gm-yellow);
  --gm-admin-yellow-dim: rgba(246, 215, 107, 0.12);
  --gm-admin-magenta: var(--gm-magenta);
  --gm-admin-text: var(--gm-text);
  --gm-admin-muted: var(--gm-text-muted);
  --ped-accent: var(--gm-yellow);
  --ped-accent-2: var(--gm-magenta);
  --mkt-accent: var(--gm-yellow);
  --mkt-accent-2: var(--gm-magenta);
  --cc-accent: var(--gm-finance);
  --cc-accent-strong: var(--gm-finance-strong);
  --rag-accent: var(--gm-ai);
  --ceo-accent: var(--gm-finance);
  --ceo-accent-strong: var(--gm-finance-strong);
  --ceo-accent-muted: var(--gm-finance-muted);
  --tg-admin-cyan: var(--gm-cyan);
}

/* Surface identity — color = product area, not user role */
[data-gm-surface="landing"] {
  --gm-surface-accent: var(--gm-magenta);
  --gm-surface-accent-muted: rgba(230, 82, 151, 0.12);
  --gm-surface-accent-on: #ffffff;
  --gm-surface-gradient: var(--gm-gradient-magenta);
  --gm-btn-primary-gradient: linear-gradient(135deg, #c44d82 0%, var(--gm-magenta) 55%, var(--gm-yellow) 100%);
  --gm-btn-primary-gradient-hover: linear-gradient(135deg, #b03d72 0%, #d14487 55%, #f0cc5a 100%);
  --gm-header-gradient: var(--gm-btn-primary-gradient);
  --gm-header-fg: #ffffff;
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-magenta) 0%, var(--gm-black) 100%);
}

[data-gm-surface="portal"] {
  --gm-surface-accent: var(--gm-magenta);
  --gm-surface-accent-muted: rgba(230, 82, 151, 0.12);
  --gm-surface-accent-on: #ffffff;
  --gm-surface-gradient: var(--gm-gradient-magenta);
  --gm-black: #000000;
  --gm-bg: #000000;
  --gm-btn-primary-gradient: linear-gradient(135deg, var(--gm-magenta) 0%, #6a1a42 42%, var(--gm-black) 100%);
  --gm-btn-primary-gradient-hover: linear-gradient(135deg, #d14487 0%, #4a122e 42%, #1a1a1a 100%);
  --gm-header-gradient: linear-gradient(135deg, var(--gm-magenta) 0%, #3a1024 48%, var(--gm-black) 100%);
  --gm-header-fg: #ffffff;
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-magenta) 0%, var(--gm-black) 100%);
}

[data-gm-surface="tienda"] {
  --gm-surface-accent: var(--gm-cyan);
  --gm-surface-accent-muted: rgba(0, 188, 212, 0.12);
  --gm-surface-accent-on: #0a0a0a;
  --gm-surface-gradient: var(--gm-gradient-cyan);
  --gm-btn-primary-gradient: linear-gradient(135deg, #0097a7 0%, var(--gm-cyan) 100%);
  --gm-btn-primary-gradient-hover: linear-gradient(135deg, #00838f 0%, #26c6da 100%);
  --gm-header-gradient: var(--gm-btn-primary-gradient);
  --gm-header-fg: var(--gm-surface-accent-on);
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-cyan) 0%, var(--gm-black) 100%);
}

[data-gm-surface="staff"],
[data-gm-surface="pedidos"] {
  --gm-surface-accent: var(--gm-yellow);
  --gm-surface-accent-muted: rgba(246, 215, 107, 0.12);
  --gm-surface-accent-on: #0a0a0a;
  --gm-surface-gradient: var(--gm-gradient-yellow);
  /* Industrial: brand yellow → black (headers + primary CTAs) */
  --gm-industrial-gradient: linear-gradient(135deg, var(--gm-yellow) 0%, #a08600 22%, #3a3a3a 58%, var(--gm-black) 100%);
  --gm-industrial-gradient-hover: linear-gradient(135deg, #f0cc5a 0%, #8a7200 22%, #4a4a4a 58%, #1a1a1a 100%);
  --gm-btn-primary-gradient: var(--gm-industrial-gradient);
  --gm-btn-primary-gradient-hover: var(--gm-industrial-gradient-hover);
  --gm-header-gradient: var(--gm-industrial-gradient);
  --gm-header-fg: #ffffff;
  --gm-btn-primary-fg: #ffffff;
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-yellow) 0%, #3a3a3a 52%, var(--gm-black) 100%);
  /* Neutralize legacy theme.css pastel buttons on pedidos/staff panel */
  --btn-pastel-primary: var(--gm-industrial-gradient);
  --btn-pastel-primary-hover: var(--gm-industrial-gradient-hover);
  --btn-pastel-primary-border: #5c4d00;
}

[data-gm-surface="marketing"] {
  --gm-surface-accent: var(--gm-yellow);
  --gm-surface-accent-muted: rgba(246, 215, 107, 0.12);
  --gm-surface-accent-on: #0a0a0a;
  --gm-surface-gradient: var(--gm-gradient-yellow);
  --gm-btn-primary-gradient: linear-gradient(135deg, var(--gm-magenta) 0%, var(--gm-yellow) 100%);
  --gm-btn-primary-gradient-hover: linear-gradient(135deg, #d14487 0%, #f0cc5a 100%);
  --gm-header-gradient: var(--gm-btn-primary-gradient);
  --gm-header-fg: #ffffff;
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-yellow) 0%, #3a3a3a 52%, var(--gm-black) 100%);
}

[data-gm-surface="tienda_admin"] {
  --gm-surface-accent: var(--gm-cyan);
  --gm-surface-accent-muted: rgba(0, 188, 212, 0.12);
  --gm-surface-accent-on: #ffffff;
  --gm-surface-gradient: var(--gm-gradient-cyan);
  --gm-cyan-industrial-gradient: var(--gm-landing-cta-cyan);
  --gm-cyan-industrial-gradient-hover: var(--gm-landing-cta-cyan-hover);
  --gm-cyan-industrial-shadow: var(--gm-landing-cta-cyan-shadow);
  --gm-btn-primary-gradient: var(--gm-cyan-industrial-gradient);
  --gm-btn-primary-gradient-hover: var(--gm-cyan-industrial-gradient-hover);
  --gm-btn-primary-fg: #ffffff;
  --gm-btn-success-gradient: var(--gm-cyan-industrial-gradient);
  --gm-btn-success-gradient-hover: var(--gm-cyan-industrial-gradient-hover);
  --gm-on-success: #ffffff;
  --gm-header-gradient: var(--gm-cyan-industrial-gradient);
  --gm-header-fg: #ffffff;
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-cyan) 0%, var(--gm-black) 100%);
  --btn-pastel-primary: var(--gm-cyan-industrial-gradient);
  --btn-pastel-primary-hover: var(--gm-cyan-industrial-gradient-hover);
  --btn-pastel-primary-border: transparent;
  --btn-pastel-success: var(--gm-cyan-industrial-gradient);
  --btn-pastel-success-hover: var(--gm-cyan-industrial-gradient-hover);
  --btn-pastel-success-border: transparent;
}

[data-gm-surface="finanzas"] {
  --gm-surface-accent: var(--gm-finance);
  --gm-surface-accent-muted: var(--gm-finance-muted);
  --gm-surface-accent-on: #ffffff;
  --gm-surface-gradient: var(--gm-gradient-finance);
  --gm-btn-primary-gradient: var(--gm-finance-industrial-gradient-muted);
  --gm-btn-primary-gradient-hover: var(--gm-finance-industrial-gradient-muted-hover);
  --gm-header-gradient: var(--gm-finance-industrial-gradient-muted);
  --gm-header-fg: #ffffff;
  --gm-btn-primary-fg: #ffffff;
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-finance) 0%, var(--gm-black) 100%);
}

[data-gm-surface="ap"] {
  /* Legacy alias — AP/proveedores shares finanzas chrome */
  --gm-surface-accent: var(--gm-finance);
  --gm-surface-accent-muted: var(--gm-finance-muted);
  --gm-surface-accent-on: #ffffff;
  --gm-surface-gradient: var(--gm-gradient-finance);
  --gm-btn-primary-gradient: var(--gm-finance-industrial-gradient-muted);
  --gm-btn-primary-gradient-hover: var(--gm-finance-industrial-gradient-muted-hover);
  --gm-header-gradient: var(--gm-finance-industrial-gradient-muted);
  --gm-header-fg: #ffffff;
  --gm-btn-primary-fg: #ffffff;
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-finance) 0%, var(--gm-black) 100%);
}

[data-gm-surface="rag"] {
  --gm-surface-accent: var(--gm-ai);
  --gm-surface-accent-muted: var(--gm-ai-muted);
  --gm-surface-accent-on: #0a0a0a;
  --gm-surface-gradient: var(--gm-gradient-ai);
  --gm-btn-primary-gradient: linear-gradient(135deg, #7c3aed 0%, var(--gm-ai) 100%);
  --gm-btn-primary-gradient-hover: linear-gradient(135deg, #6d28d9 0%, #c4b5fd 100%);
  --gm-header-gradient: var(--gm-btn-primary-gradient);
  --gm-header-fg: var(--gm-surface-accent-on);
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-ai) 0%, var(--gm-black) 100%);
}

[data-gm-surface="hhrr"] {
  --gm-surface-accent: var(--gm-hhrr);
  --gm-surface-accent-muted: var(--gm-hhrr-muted);
  --gm-surface-accent-on: #0a0a0a;
  --gm-surface-gradient: var(--gm-gradient-hhrr);
  --gm-btn-primary-gradient: var(--gm-hhrr-industrial-gradient-muted);
  --gm-btn-primary-gradient-hover: var(--gm-hhrr-industrial-gradient-muted-hover);
  --gm-header-gradient: var(--gm-hhrr-industrial-gradient-muted);
  --gm-header-fg: #ffffff;
  --gm-btn-primary-fg: #ffffff;
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-hhrr) 0%, var(--gm-black) 100%);
}

[data-gm-surface="developer"] {
  --gm-surface-accent: var(--gm-magenta);
  --gm-surface-accent-muted: rgba(230, 82, 151, 0.12);
  --gm-surface-accent-on: #ffffff;
  --gm-surface-gradient: var(--gm-dcc-rainbow);
  --gm-btn-primary-gradient: var(--gm-dcc-rainbow);
  --gm-btn-primary-gradient-hover: linear-gradient(
    90deg,
    #d14487 0%,
    #f0cc5a 28%,
    #26c6da 52%,
    #86efac 76%,
    #c4b5fd 100%
  );
  --gm-header-gradient: var(--gm-dcc-rainbow);
  --gm-header-fg: #ffffff;
  --gm-btn-primary-fg: #0a0a0a;
  --gm-nav-dropdown-accent: var(--gm-dcc-rainbow-bar);
}

[data-gm-surface="admin_business"],
[data-gm-surface="admin_tech"] {
  --gm-surface-accent: var(--gm-text-muted);
  --gm-surface-accent-muted: rgba(255, 255, 255, 0.06);
  --gm-surface-accent-on: #ffffff;
  --gm-surface-gradient: var(--gm-gradient-admin);
  --gm-header-gradient: var(--gm-header-gradient-neutral);
  --gm-header-fg: #ffffff;
  --gm-nav-dropdown-accent: linear-gradient(90deg, var(--gm-text-muted) 0%, var(--gm-black) 100%);
}