/**

 * Denim2Jeans — tokens idênticos a refs/gemini-ui/index3.html (canônico).

 * Dark = Deep Denim · Light = Inside Out (avesso).

 * html.d2j-theme vence Utils::themeCss() (--color-* roxo main).

 */



/* Light = Inside Out (avesso) — default sem data-theme="dark" */

html.d2j-theme,

html.d2j-theme:root {

  --color-primary: #1d4ed8;

  --color-secondary: #3b82f6;

  --brand-primary: #1d4ed8;

  --brand-secondary: #1e3a8a;

  --bg-app: #d2dee9;

  --bg-surface: #e2ebf5;

  --bg-deep: #d2dee9;

  --bg-wash: linear-gradient(

    135deg,

    rgba(241, 245, 249, 0.85) 0%,

    rgba(191, 219, 254, 0.9) 100%

  );

  --text: #1e293b;

  --text-muted: #475569;

  --text-primary: #1e293b;

  --text-on-brand: #ffffff;

  --border: #cbd5e1;

  --hover-tint: rgba(29, 78, 216, 0.1);

  --glow: rgba(29, 78, 216, 0.15);

  --glow-soft: rgba(29, 78, 216, 0.1);

  --brand-gradient-from: #0f172a;

  --brand-gradient-to: #1d4ed8;

  --brand-shadow: 0 4px 15px rgba(29, 78, 216, 0.15);

  --status-title: #1d4ed8;

  --status-text: #334155;

  --pocket-bg: rgba(226, 235, 245, 0.82);

  --pocket-border: #cbd5e1;

  --pocket-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.4),

    0 15px 30px rgba(15, 23, 42, 0.08);

  --pocket-hatch: transparent;

  /* Fibras: linhas diagonais (não xadrez); só no body */
  --texture-fg: rgba(30, 64, 120, 0.22);

  --texture-period: 6px;

  --texture-line: 1px;

  --stitch: #d97706;

  --footer-color: #64748b;

  --switch-track: rgba(255, 255, 255, 0.5);

  --switch-border: rgba(0, 0, 0, 0.1);

  --switch-active-bg: #ffffff;

  --switch-active-fg: #1e3a8a;

  --switch-active-shadow: 0 4px 10px rgba(30, 58, 138, 0.1);

  --switch-idle-fg: #64748b;

  /* Navbar escura semi-transparente — fibras vêm do body (mesmo alinhamento) */
  --nav-bg: rgba(17, 37, 64, 0.88);

  --nav-text: #f0f7ff;

  --nav-text-muted: #94a3b8;

  --nav-border: #1e3a5f;

  /* Papel idle = tema inverso (na página light → card dark) */
  --role-idle-bg: #112540;

  --role-idle-fg: #f0f7ff;

  --role-idle-muted: #94a3b8;

  /* Abas: sempre visual do botão light */
  --tab-bg: #e2ebf5;

  --tab-fg: #1e293b;

  --tab-border: #000000;

  --ok: #15803d;

  --err: #dc2626;

  --dash-abaixo: #ef4444;

  --dash-igual: #22c55e;

  --dash-acima: #3b82f6;

  --dash-parada: #475569;

  --radius: 4px;

  --font: "Montserrat", "Segoe UI", Roboto, sans-serif;

  --nav-h: 52px;

}



/* Dark = Deep Denim (index3 default) */

html.d2j-theme[data-theme="dark"] {

  --color-primary: #38bdf8;

  --color-secondary: #7dd3fc;

  --brand-primary: #38bdf8;

  --brand-secondary: #0ea5e9;

  --bg-app: #0d1e36;

  --bg-surface: #112540;

  --bg-deep: #0d1e36;

  --bg-wash: linear-gradient(

    135deg,

    rgba(16, 37, 66, 0.9) 0%,

    rgba(8, 17, 31, 0.95) 100%

  );

  --text: #ffffff;

  --text-muted: #94a3b8;

  --text-primary: #ffffff;

  --text-on-brand: #0d1e36;

  --border: #1e3a5f;

  --hover-tint: rgba(56, 189, 248, 0.12);

  --glow: rgba(56, 189, 248, 0.2);

  --glow-soft: rgba(56, 189, 248, 0.15);

  --brand-gradient-from: #f0f7ff;

  --brand-gradient-to: #38bdf8;

  --brand-shadow: 0 4px 20px rgba(56, 189, 248, 0.2);

  --status-title: #38bdf8;

  --status-text: #cbd5e1;

  --pocket-bg: rgba(17, 37, 64, 0.82);

  --pocket-border: #1e3a5f;

  --pocket-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.05),

    0 15px 35px rgba(0, 0, 0, 0.3);

  --pocket-hatch: transparent;

  --texture-fg: rgba(255, 255, 255, 0.1);

  --texture-period: 6px;

  --texture-line: 1px;

  --stitch: #d97706;

  --footer-color: #475569;

  --switch-track: rgba(0, 0, 0, 0.15);

  --switch-border: rgba(255, 255, 255, 0.1);

  --switch-active-bg: #1e293b;

  --switch-active-fg: #ffffff;

  --switch-active-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  --switch-idle-fg: #64748b;

  --nav-bg: rgba(17, 37, 64, 0.88);

  --nav-text: #f0f7ff;

  --nav-text-muted: #94a3b8;

  --nav-border: #1e3a5f;

  /* Papel idle = tema inverso (na página dark → card light) */
  --role-idle-bg: #e2ebf5;

  --role-idle-fg: #1e293b;

  --role-idle-muted: #64748b;

  /* Abas: sempre visual do botão light */
  --tab-bg: #e2ebf5;

  --tab-fg: #1e293b;

  --tab-border: #000000;

  --ok: #4ade80;

  --err: #f87171;

  --dash-abaixo: #f87171;

  --dash-igual: #4ade80;

  --dash-acima: #38bdf8;

  --dash-parada: #64748b;

}