:root {
  --brand-primary: #126e65;
  --brand-secondary: #d88943;
  --brand-success: #2f8b57;
  --brand-warning: #c97b2d;
  --brand-danger: #b95243;

  --primary: var(--brand-primary);
  --primary-foreground: #ffffff;
  --secondary: var(--brand-secondary);
  --secondary-foreground: #ffffff;
  --background: #f7f5f0;
  --surface: #ffffff;
  --surface-subtle: #fbfaf7;
  --surface-control: #ffffff;
  --surface-floating: #ffffff;
  --foreground: #163835;
  --surface-foreground: var(--foreground);
  --muted-foreground: #647771;
  --icon-foreground: var(--muted-foreground);
  --border: #e8ebeb;
  --control-border: #dadfdf;
  --neutral-surface: #ede7dc;
  --control-off-surface: #dfe4e1;
  --success: var(--brand-success);
  --warning: var(--brand-warning);
  --danger: var(--brand-danger);
  --sidebar: #1f3b38;
  --sidebar-foreground: #f7f5f0;
  --map-marker-color: var(--primary);
  --map-marker-selected: var(--secondary);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.3rem;
  --font-family: 'Manrope', 'Aptos', 'Segoe UI', sans-serif;

  --guvia-primary-rgb: 18, 110, 101;
  --guvia-primary-foreground-rgb: 255, 255, 255;
  --guvia-secondary-rgb: 216, 137, 67;
  --guvia-secondary-foreground-rgb: 255, 255, 255;
  --guvia-success-rgb: 47, 139, 87;
  --guvia-success-foreground-rgb: 255, 255, 255;
  --guvia-warning-rgb: 201, 123, 45;
  --guvia-warning-foreground-rgb: 255, 255, 255;
  --guvia-danger-rgb: 185, 82, 67;
  --guvia-danger-foreground-rgb: 255, 255, 255;
  --guvia-background-rgb: 247, 245, 240;
  --guvia-foreground-rgb: 22, 56, 53;
  --guvia-surface-rgb: 255, 255, 255;
  --guvia-muted-foreground-rgb: 100, 119, 113;
}

ion-app {
  --background: #f3f2ec;
  --secondary-foreground: #2c2117;
  --surface-subtle: #edf1ec;
  --surface-control: #fffefa;
  --surface-floating: #ffffff;
  --muted-foreground: #526861;
  --icon-foreground: var(--muted-foreground);
  --border: #d5dfda;
  --border-faint: #e2e8e4;
  --control-background: var(--surface-control);
  --control-background-hover: #f2f5f1;
  --control-background-disabled: #eaeeea;
  --control-background-readonly: #f2f4ef;
  --control-border: #cbd7d1;
  --control-border-hover: #a9bbb3;
  --control-placeholder: #677972;
  --neutral-surface: #e9e8e0;
  --icon-surface: color-mix(in srgb, var(--primary) 14%, white);
  --control-off-surface: #dce4df;
  --success: #2d8354;
  --success-foreground: #ffffff;
  --warning-foreground: #2c2117;
  --danger-foreground: #ffffff;
  --danger-surface-faint: color-mix(in srgb, var(--danger) 4%, var(--surface));
  --danger-surface-subtle: color-mix(in srgb, var(--danger) 7%, var(--surface));
  --danger-surface-hover: color-mix(in srgb, var(--danger) 10%, var(--surface));
  --danger-surface: color-mix(in srgb, var(--danger) 8%, var(--surface));
  --danger-surface-strong: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --focus-ring: color-mix(in srgb, var(--primary) 34%, white);
  --primary-soft: color-mix(in srgb, var(--primary) 13%, white);
  --primary-surface: color-mix(in srgb, var(--primary) 11%, var(--background));
  --primary-border: color-mix(in srgb, var(--primary) 20%, white);
  --primary-glow: color-mix(in srgb, var(--primary) 20%, transparent);
  --primary-focus: color-mix(in srgb, var(--primary) 24%, white);
  --primary-shadow-sm: 0 8px 18px color-mix(in srgb, var(--primary) 18%, transparent);
  --primary-shadow-fab: 0 6px 24px color-mix(in srgb, var(--primary) 42%, transparent);
  --primary-shadow-fab-active: 0 3px 12px color-mix(in srgb, var(--primary) 34%, transparent);
  --secondary-soft: color-mix(in srgb, var(--secondary) 14%, transparent);
  --secondary-soft-strong: color-mix(in srgb, var(--secondary) 20%, transparent);
  --secondary-glow: color-mix(in srgb, var(--secondary) 24%, transparent);
  --secondary-border: color-mix(in srgb, var(--secondary) 42%, transparent);
  --secondary-shadow-sm: 0 8px 18px color-mix(in srgb, var(--secondary) 16%, transparent);
  --secondary-shadow-md: 0 10px 24px color-mix(in srgb, var(--secondary) 22%, transparent);
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 4px 14px rgba(22, 56, 53, 0.09);
  --shadow-md: 0 10px 28px rgba(22, 56, 53, 0.12);
  --shadow-lg: 0 20px 44px rgba(22, 56, 53, 0.16);
  --shadow-dropdown: 0 18px 38px rgba(22, 56, 53, 0.15);
  --shadow-toast: 0 18px 38px rgba(22, 56, 53, 0.17);
  --mobile-tabs-foreground: var(--muted-foreground);
  --mobile-tabs-active: var(--primary);
  --mobile-tabs-border: var(--border);
  --mobile-tabs-shadow: 0 -10px 28px rgba(22, 56, 53, 0.1);
  --mobile-fab-shadow: 0 6px 24px color-mix(in srgb, var(--primary) 42%, transparent);
  --mobile-fab-shadow-active: 0 3px 12px color-mix(in srgb, var(--primary) 34%, transparent);
  --map-popup-background: var(--surface-floating);
  --map-popup-foreground: var(--foreground);
  --map-control-background: var(--surface-floating);
  --map-control-foreground: var(--foreground);
  --guvia-background-rgb: 243, 242, 236;
  --guvia-muted-foreground-rgb: 82, 104, 97;
}

ion-app ion-content::part(background) {
  background-color: var(--background);
  background-image:
    radial-gradient(
      circle at -4% -8%,
      color-mix(in srgb, var(--primary) 28%, transparent) 0%,
      color-mix(in srgb, var(--primary) 12%, transparent) 31%,
      transparent 55%
    ),
    radial-gradient(
      circle at 108% 18%,
      color-mix(in srgb, var(--secondary) 25%, transparent) 0%,
      color-mix(in srgb, var(--secondary) 10%, transparent) 30%,
      transparent 52%
    ),
    linear-gradient(150deg, #edf5f1 0%, #f8f5ef 52%, #faeee1 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

ion-app ion-button[color='danger'][fill='clear'],
ion-app ion-button[color='danger'][fill='outline'] {
  --background: var(--danger-surface);
  --background-hover: var(--danger-surface-hover);
  --background-activated: var(--danger-surface-strong);
  --border-color: var(--danger-border);
}