/* ========================================
   VARIÁVEIS GLOBAIS - UMBRELLA STORE
   SISTEMA DUAL: CLARO/ESCURO - ALINHADO COM APP FLUTTER
   ======================================== */

:root {
  /* ===== TEMA ESCURO (PADRÃO) ===== */
  --primary-bg: #0a0a0a;
  --secondary-bg: #0f0f0f;
  --tertiary-bg: #141414;
  --card-bg: #1a1a1a;
  --modal-bg: #1f1f1f;
  --modal-backdrop: rgba(0, 0, 0, 0.55);
  --overlay-bg: #242424;

  --text-primary: #eaeaea;
  --text-secondary: #b0b0b0;
  --text-tertiary: #8a8a8a;
  --text-muted: #8a8a8a;
  --text-disabled: #5a5a5a;

  --text-secondary-rgb: 176, 176, 176;
  --text-muted-rgb: 138, 138, 138;

  --accent-primary: #ffffff;
  --accent-hover: #e0e0e0;
  --accent-muted: #848484;

  --border-primary: #181818;
  --border-secondary: #222222;
  --border-light: #2e2e2e;
  --border-focus: #2e2e2e;
  --border-thin: 0.5px;
  --border-normal: 1px;

  /* Design system tokens */
  --bg: #0a0a0a;
  --surface-1: #0f0f0f;
  --surface-2: #141414;
  --surface-3: #1a1a1a;
  --border-1: #181818;
  --border-2: #222222;
  --border-3: #2e2e2e;
  --text-1: #eaeaea;
  --text-2: #b0b0b0;
  --text-3: #8a8a8a;
  --text-inv: #0a0a0a;
  --accent: #ffffff;
  --accent-dim: rgba(255,255,255,0.06);
  --red: #d94f3d;
  --red-dim: rgba(217,79,61,0.10);
  --red-mid: rgba(217,79,61,0.28);
  --amber: #c47f2a;
  --amber-dim: rgba(196,127,42,0.10);
  --amber-mid: rgba(196,127,42,0.28);
  --blue: #4a78c4;
  --blue-dim: rgba(74,120,196,0.10);
  --blue-mid: rgba(74,120,196,0.28);
  --green: #4a9e6e;
  --green-dim: rgba(74,158,110,0.10);
  --green-mid: rgba(74,158,110,0.28);
  --whatsapp: #25D366;
  --whatsapp-hover: #20BA5A;
  --whatsapp-dim: rgba(37, 211, 102, 0.25);
  --font: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* Altura igual: topo e toolbar do UMap (evita barras assimétricas após toolbar combinada) */
  --umap-toolbar-h: 56px;
  --umap-topbar-h: var(--umap-toolbar-h);
  --umap-cad-bar-h: 42px;
  --umap-panel-width: 500px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.7);

  --primary-color: var(--accent);
  --primary-hover: #e0e0e0;
  --primary-color-rgb: 255, 255, 255;
  --primary-color-rgba: rgba(255,255,255,0.1);
  --accent-color: var(--accent);
  --danger-color: var(--red);
  --success-color: var(--green);
  --warning-color: var(--amber);
  --input-background: var(--surface-2);
  --button-hover: var(--accent-dim);
  --shadow-card: var(--shadow-md);
  --shadow: var(--shadow-md);
  --border-radius: var(--r-lg);
  --border-radius-sm: var(--r-md);
}

[data-theme="light"] {
  /* Tema claro — referência SaaS limpo (Registro Rural) */
  --primary-bg: #f7f8fa;
  --secondary-bg: #ffffff;
  --tertiary-bg: #f1f3f5;
  --card-bg: #ffffff;
  --modal-bg: #ffffff;
  --modal-backdrop: rgba(15, 23, 42, 0.35);
  --overlay-bg: #f1f3f5;

  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;
  --text-disabled: #cbd5e1;

  --text-secondary-rgb: 71, 85, 105;
  --text-muted-rgb: 148, 163, 184;

  --accent-primary: #1e293b;
  --accent-hover: #0f172a;
  --accent-muted: #475569;

  --border-primary: #e2e8f0;
  --border-secondary: #e2e8f0;
  --border-light: #cbd5e1;
  --border-focus: #94a3b8;

  --bg: #f7f8fa;
  --surface-1: #ffffff;
  --surface-2: #f1f3f5;
  --surface-3: #e2e8f0;
  --border-1: #e2e8f0;
  --border-2: #e2e8f0;
  --border-3: #cbd5e1;
  --text-1: #1e293b;
  --text-2: #475569;
  --text-3: #64748b;
  --text-inv: #ffffff;
  --accent: #1e293b;
  --accent-dim: rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);

  --primary-color: var(--accent);
  --primary-hover: #0f172a;
  --primary-color-rgb: 30, 41, 59;
  --primary-color-rgba: rgba(0,0,0,0.06);
  --accent-color: var(--accent);
  --danger-color: var(--red);
  --success-color: var(--green);
  --warning-color: var(--amber);
  --input-background: var(--surface-2);
  --button-hover: var(--accent-dim);
  --shadow-card: var(--shadow-md);
  --shadow: var(--shadow-md);
}

/* ===== TRANSIÇÕES SUAVES PARA MUDANÇA DE TEMA ===== */
* {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

:root {
  --success-color: var(--green);
  --danger-color: var(--red);
  --error-color: var(--red);
  --warning-color: var(--amber);
  --info-color: var(--blue);

  --success-green: var(--green);
  --success-hover: #3d8a5c;
  --success-light: var(--green-dim);

  --danger-red: var(--red);
  --danger-hover: #c24434;
  --danger-light: var(--red-dim);

  --background-secondary: var(--secondary-bg);

  --warning-yellow: var(--amber);
  --warning-hover: #a66d23;
  --warning-light: var(--amber-dim);
  
  /* ===== LOGO ===== */
  --logo-red: #dc2626;
  --logo-white: #ffffff;
  --brand-gradient: linear-gradient(135deg, var(--accent-primary) 0%, var(--logo-red) 100%);
  
  /* ===== BORDAS ===== */
  --border-radius: 8px;          /* radiusMedium */
  --border-radius-lg: 12px;      /* radiusLarge */
  --border-radius-xl: 16px;      /* radiusXLarge */
  
  /* ===== SOMBRAS (mais sutis) ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.25);
  
  --font-family-primary: var(--font);
  --font-family-mono: var(--mono);
  
  /* Tamanhos de Fonte */
  --font-size-xs: 9px;           /* fontSizeCaption */
  --font-size-sm: 10px;          /* fontSizeLabel */
  --font-size-base: 12px;        /* fontSizeBody */
  --font-size-lg: 13px;          /* fontSizeTitleLarge */
  --font-size-xl: 14px;
  --font-size-2xl: 16px;
  --font-size-3xl: 20px;
  --font-size-4xl: 24px;
  --font-size-5xl: 32px;
  
  /* Pesos de Fonte */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* ===== ESPAÇAMENTOS (alinhados) ===== */
  --spacing-xs: 4px;             /* spacingXSmall */
  --spacing-sm: 8px;             /* spacingSmall */
  --spacing-md: 16px;            /* spacingMedium */
  --spacing-lg: 24px;            /* spacingLarge */
  --spacing-xl: 32px;            /* spacingXLarge */
  --spacing-2xl: 40px;           /* spacingXXLarge */
  --spacing-3xl: 80px;           /* spacingHuge */
  --spacing-4xl: 48px;
  --spacing-5xl: 64px;
  
  /* ===== BREAKPOINTS ===== */
  --mobile: 576px;               /* Smartphones */
  --tablet: 768px;               /* Tablets */
  --desktop: 992px;              /* Desktops */
  --wide: 1200px;                /* Telas grandes */
  --ultrawide: 1400px;           /* Telas ultra largas */
  
  /* ===== TRANSIÇÕES ===== */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  
  /* ===== Z-INDEX ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* === umap: escala z-index e padroes u- === */
  --z-umap-base: 0;
  --z-umap-mapa: 10;
  --z-umap-controles: 500;
  --z-umap-barras: 1000;
  --z-umap-janela: 2000;
  --z-umap-popup: 9500;
  --z-umap-dialogo: 10000;
  --z-umap-toast: 12000;
  --z-umap-bloqueio: 99999;
  --z-umap-tooltip: 100000;
  --z-umap-topo: 2147483640;
  /* padrões para os componentes u- fora de data-area (mapa); admin e cliente sobrescrevem no bloco data-area */
  --accent-data: var(--green);
  --accent-data-soft: var(--green-dim);
  --accent-data-ink: var(--text-1);
  --surface-hover: var(--surface-2);
  --c-pill: var(--text-1);
  --c-pillfg: var(--text-inv);
  /* gráficos (js/ui/u-charts.js) fora de data-area: os mesmos papéis dos --c-* do admin e do cliente */
  --accent-data-2: var(--green-mid);
  --accent-data-3: var(--border-3);
  --c-line: var(--accent-data);
  --c-area: var(--green-dim);
  --c-gray: var(--border-3);
  --c-empty: var(--surface-2);
  --c-hatch: var(--border-2);
  --c-step: var(--text-2);
  --c-steparea: var(--accent-dim);
  --c-bar: var(--border-2);
  --c-barbg: var(--surface-2);
  --c-grid: var(--border-1);
  --c-shade: var(--accent-dim);
  --c-tipline: var(--border-2);
  --c-ptr: var(--text-1);
  --shadow-tip: var(--shadow-md);
  /* === fim umap === */
  
  /* ===== COMPONENTES ===== */
  --input-height: 40px;
  --button-height: 40px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  
  --navbar-height: 4rem;
  --navbar-bg: var(--tertiary-bg);
  --navbar-border: var(--border-primary);
  
  --background-light: rgba(255, 255, 255, 0.03);
  --border-color: var(--border-primary);
  
  --bg-transparent-light: rgba(255, 255, 255, 0.02);
  --bg-transparent-medium: rgba(255, 255, 255, 0.03);
  --bg-transparent-strong: rgba(255, 255, 255, 0.05);
  --bg-gradient-dark: linear-gradient(145deg, #0F0F0F 0%, #141414 100%);
  --bg-gradient-header: linear-gradient(135deg, #141414 0%, #1A1A1A 100%);
  
  --card-padding: var(--spacing-lg);
  --card-border-radius: var(--border-radius);
  --card-shadow: var(--shadow);
  
  --btn-padding-y: 0.5rem;
  --btn-padding-x: 1rem;
  --btn-border-radius: var(--border-radius);
  --btn-font-weight: var(--font-weight-medium);
  
  --input-padding-y: 0.5rem;
  --input-padding-x: 0.75rem;
  --input-border-radius: var(--border-radius);
  --input-border-color: var(--border-primary);
  --input-focus-border-color: var(--border-focus);
  
  /* ===== ANIMAÇÕES ===== */
  --animation-fade-in: fadeIn 0.3s ease-in-out;
  --animation-slide-up: slideUp 0.3s ease-out;
  --animation-scale-in: scaleIn 0.2s ease-out;
}

/* ===== DARK MODE OVERRIDES ===== */
/* Tema escuro é o padrão da Umbrella Store, não precisamos de overrides */

/* ===== KEYFRAMES PARA ANIMAÇÕES ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes scaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

/* ===== UTILITÁRIOS DE CORES ===== */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-3) !important; }
.text-success { color: var(--success-green) !important; }
.text-danger { color: var(--danger-red) !important; }
.text-warning { color: var(--warning-yellow) !important; }
.text-accent { color: var(--accent-primary) !important; }
.text-logo { color: var(--logo-red) !important; }

.bg-primary { background-color: var(--primary-bg) !important; }
.bg-secondary { background-color: var(--secondary-bg) !important; }
.bg-tertiary { background-color: var(--tertiary-bg) !important; }
.bg-card { background-color: var(--card-bg) !important; }

/* ========================================
   PAINEL ADMIN E ÁREA DO CLIENTE - tokens do novo layout (docs/design/umbrella-admin-referencia.html)
   Valem com <html data-area="admin">, "cliente" ou "publico" (site público, desde a fase 1 do site público).
   Login e UMap não mudam.
   ======================================== */
:root:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) {
  --font: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --r-xl: 14px;
  --shadow-tip: 0 8px 24px rgba(0,0,0,.12);

  /* aliases legados apontando para os tokens do admin (telas antigas seguem o tema novo) */
  --primary-bg: var(--bg);
  --secondary-bg: var(--surface-1);
  --tertiary-bg: var(--surface-2);
  --card-bg: var(--surface-1);
  --overlay-bg: var(--surface-3);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-tertiary: var(--text-3);
  --text-muted: var(--text-3);
  --border-primary: var(--border-1);
  --border-secondary: var(--border-2);
  --border-light: var(--border-3);
  --border-focus: var(--border-3);
  --navbar-bg: var(--surface-top);
}

:root:is([data-area="admin"], [data-area="cliente"], [data-area="publico"])[data-theme="light"] {
  --bg: #f6f7f9;
  --surface-side: #fbfbfc;
  --surface-top: #fbfbfc;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #eff2f6;
  --surface-active: #eef2f7;
  --surface-hover: #f5f7fa;
  --surface-pill: #eff2f6;
  --border-1: #eef0f3;
  --border-2: #e5e8ed;
  --border-3: #d1d6de;
  --text-1: #10141c;
  --text-2: #4a5261;
  --text-3: #878f9c;
  --text-inv: #ffffff;
  --accent-dim: #eef1f5;

  --green: #17a36b;
  --amber: #e0a21b;
  --red: #e5484d;
  --green-ink: #0e7f52;
  --amber-ink: #94620a;
  --red-ink: #c42b31;

  --accent-data: #2f8cf0;
  --accent-data-2: #8cc4fb;
  --accent-data-3: #c9d3df;
  --accent-data-soft: #e7f1fd;
  --accent-data-ink: #1769c4;

  --logo-bg: #0b0b0c;
  --modal-bg: #f2f4f7;
  --modal-backdrop: rgba(241,244,248,.6);
  --scrim: rgba(15,25,45,.25);
  --shadow-card: 0 1px 2px rgba(15,25,45,.04), 0 4px 16px rgba(15,25,45,.04);
  --shadow-lg: 0 24px 60px rgba(15,25,45,.16);
  --shadow-drawer: 8px 0 30px rgba(0,0,0,.15);
  --scrollbar-thumb: var(--border-3);
  --scrollbar-thumb-hover: var(--text-3);

  --c-gray: #d3d9e1; --c-empty: #f2f4f7; --c-line: #2f8cf0; --c-area: rgba(47,140,240,.16); --c-hatch: rgba(100,112,130,.22);
  --c-step: #3b4352; --c-steparea: rgba(90,100,118,.20); --c-bar: #d9dee5; --c-barbg: #f4f6f8; --c-grid: #eef0f3;
  --c-shade: rgba(15,25,45,.03); --c-pill: #121722; --c-pillfg: #ffffff; --c-tipline: #e5e8ed; --c-ptr: #10141c;
  --c-hb: #c7d0db; --c-hbhatch: #e0e5eb; --c-tick: #eaedf1;
  color-scheme: light;
}

:root:is([data-area="admin"], [data-area="cliente"], [data-area="publico"])[data-theme="dark"],
:root:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]):not([data-theme]) {
  /* Escuro "preto fosco": superfícies chapadas, sem sombra e sem degradê */
  --bg: #141414;
  --surface-side: #181818;
  --surface-top: #141414;
  --surface-1: #181818;
  --surface-2: #202020;
  --surface-3: #242424;
  --surface-active: #212121;
  --surface-hover: #1c1c1c;
  --surface-pill: #292929;
  --border-1: #202020;
  --border-2: #222222;
  --border-3: #2e2e2e;
  --text-1: #ececec;
  --text-2: #a6a6a6;
  --text-3: #737373;
  --text-inv: #141414;
  --accent-dim: #202020;

  --green: #3fb97f;
  --amber: #d9a93b;
  --red: #f26363;
  --green-ink: #5fc996;
  --amber-ink: #e2b856;
  --red-ink: #ff7b7b;

  --accent-data: #009957;
  --accent-data-2: #09653d;
  --accent-data-3: #0e4b31;
  --accent-data-soft: #292929;
  --accent-data-ink: #f0f0f0;

  --logo-bg: #000000;
  --modal-bg: #181818;
  --modal-backdrop: rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.6);
  --shadow-card: none;
  --shadow-lg: none;
  --shadow-drawer: none;
  --scrollbar-thumb: #262626;
  --scrollbar-thumb-hover: #333333;

  --c-gray: #0e4b31; --c-empty: #242424; --c-line: #009957; --c-area: rgba(0,153,87,.14); --c-hatch: rgba(255,255,255,.06);
  --c-step: #047e4a; --c-steparea: rgba(0,153,87,.10); --c-bar: #2e2e2e; --c-barbg: #1d1d1d; --c-grid: #212121;
  --c-shade: rgba(255,255,255,.025); --c-pill: #ececec; --c-pillfg: #141414; --c-tipline: #2e2e2e; --c-ptr: #ececec;
  --c-hb: #3a3a3a; --c-hbhatch: #262626; --c-tick: #242424;
  color-scheme: dark;
}

/* Página do Pix (site público): o QR fica sempre escuro sobre papel claro, nos dois temas, para qualquer leitor.
   A copa da árvore usa o azul de acento; o verde fica só nas folhas do estado pago. */
:root[data-area="publico"] {
  --pix-papel: #ffffff;
  --pix-tinta: #0b2f52;
  --pix-tinta-2: #0e3a63; --pix-tinta-3: #15497a; --pix-tinta-4: #1b5488; --pix-tinta-5: #123f6b;
  --pix-copa-1: #8ccbf4; --pix-copa-2: #6fbaee; --pix-copa-3: #52a6e3; --pix-copa-4: #b4dcf8; --pix-copa-5: #3c92d6;
  --pix-folha-1: #58b368; --pix-folha-2: #439f56; --pix-folha-3: #74c67a; --pix-folha-4: #35894b; --pix-folha-5: #93d58d;
  --pix-tronco-1: #4a5568; --pix-tronco-2: #3c4656;
  --pix-pedra: #d8dce1; --pix-lajota: #b7bdc5; --pix-miolo: #f3c63f;
}