/* ============================================================
   GAS BRASILEIRO OSASCO - TOKENS GLOBAIS
   ============================================================ */
:root {
  --gb-primary: #002D72;
  --gb-accent: #D90E21;
  --gb-bg: #F5F5F5;
  --gb-surface: #FFFFFF;
  --gb-text: #0B1220;
  --gb-text-muted: rgba(11, 18, 32, 0.72);
  --gb-border: rgba(0, 45, 114, 0.14);
  --gb-shadow: rgba(11, 18, 32, 0.10);
  --gb-focus: rgba(0, 45, 114, 0.35);
  --gb-success: #16A34A;
  --gb-warning: #F59E0B;
  --gb-danger: #DC2626;
  --gb-info: #0284C7;
  --gb-radius: 14px;
}

/* Utilities */
.bg-gb-primary { background-color: var(--gb-primary); }
.bg-gb-accent { background-color: var(--gb-accent); }
.text-gb-primary { color: var(--gb-primary); }
.text-gb-accent { color: var(--gb-accent); }
.border-gb { border-color: var(--gb-border); }

/* Component Tokens Defaults */
.gb-button-primary {
  background-color: var(--gb-primary);
  color: var(--gb-surface);
}
.gb-button-primary:hover {
  background-color: color-mix(in srgb, var(--gb-primary) 88%, black);
}
.gb-button-primary:active {
  background-color: color-mix(in srgb, var(--gb-primary) 78%, black);
}
.gb-button-primary:focus {
  box-shadow: 0 0 0 4px var(--gb-focus);
}

.gb-button-accent {
  background-color: var(--gb-accent);
  color: var(--gb-surface);
}
.gb-button-accent:hover {
  background-color: color-mix(in srgb, var(--gb-accent) 88%, black);
}
.gb-button-accent:active {
  background-color: color-mix(in srgb, var(--gb-accent) 78%, black);
}
.gb-button-accent:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gb-accent) 30%, transparent);
}

.gb-card {
  background-color: var(--gb-surface);
  border: 1px solid var(--gb-border);
  box-shadow: 0 10px 30px var(--gb-shadow);
  border-radius: var(--gb-radius);
}

body.gasbrasileiro-theme {
  background-color: var(--gb-bg);
  color: var(--gb-text);
}