:root {
  /* Primary */
  --color-primary: #00796B;        /* Brand / Buttons */
  --color-primary-dark: #004D40;   /* Hover / Headers */

  /* Secondary / Accent */
  --color-accent: #FF7043;         /* Highlights, icons */
  --color-accent-light: #FFCF9D;   /* Hover, soft accents */

  /* Neutrals */
  --color-text: #263238;           /* Main text */
  --color-text-muted: #607D8B;     /* Secondary text */
  --color-bg: #F5F5DC;             /* Section / card backgrounds */
  --color-white: #FFFFFF;

  /* Feedback */
  --color-success: #2E7D32;
  --color-warning: #FFA000;
  --color-error: #D32F2F;
  --color-info: #0288D1;

  /* Shadows */
  --shadow-light: rgba(38, 50, 56, 0.08);
  --shadow-medium: rgba(38, 50, 56, 0.16);
}

body{
    background: var(--color-white);
}

.title{
  font-weight: 800;
  color: var(--color-primary-dark);
  letter-spacing: -0.3px;
}


/* buttons */
.btn-brand {
    color: #fff;
    background-color: var(--color-primary);
    transition: background-color 0.3s, color 0.3s;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--color-primary-dark);
    color: #fff;
}