:root {
  --sommetry-red-900: #3d0200;
  --sommetry-red-700: #5d0401;
  --sommetry-red-600: #760601;
  --sommetry-red-500: #870802;
  --sommetry-red-400: #a34b0b;
  --sommetry-red-300: #d4bcb0;
  --sommetry-red-100: #f5ede8;
  --sommetry-highlight: #d4bcb0;
  --sommetry-black: #101114;
  --sommetry-white: #ffffff;

  --sommetry-main-rgb: 135, 8, 2;
  --sommetry-secondary-rgb: 163, 75, 11;
  --sommetry-highlight-rgb: 212, 188, 176;

  --sommetry-bg: var(--sommetry-white);
  --sommetry-bg-muted: var(--sommetry-red-100);
  --sommetry-text-primary: var(--sommetry-black);
  --sommetry-text-secondary: rgba(16, 17, 20, 0.75);
  --sommetry-text-inverse: var(--sommetry-white);
  --sommetry-link: var(--sommetry-red-500);
  --sommetry-link-hover: var(--sommetry-red-400);
  --sommetry-nav-bg: var(--sommetry-red-900);
  --sommetry-nav-text: var(--sommetry-white);
  --sommetry-footer-bg: var(--sommetry-red-900);
  --sommetry-footer-text: var(--sommetry-white);
  --sommetry-card-bg: var(--sommetry-white);
  --sommetry-card-border: #eadfd9;
  --sommetry-card-shadow: 0 4px 12px rgba(16, 17, 20, 0.1);
  --sommetry-focus-ring: rgba(var(--sommetry-main-rgb), 0.35);
  --sommetry-button-primary-bg: var(--sommetry-red-500);
  --sommetry-button-primary-hover: var(--sommetry-red-400);
  --sommetry-button-primary-text: var(--sommetry-white);
  --sommetry-border-strong: var(--sommetry-red-700);
}

a {
  color: var(--sommetry-link);
}

a:hover,
a:focus {
  color: var(--sommetry-link-hover);
}

body {
  background-color: var(--sommetry-bg);
  color: var(--sommetry-text-primary);
}

.bg-gray-50 { background-color: var(--sommetry-bg) !important; }
.bg-gray-100 { background-color: var(--sommetry-red-100) !important; }
.text-gray-800 { color: var(--sommetry-text-primary) !important; }
.text-gray-700 { color: var(--sommetry-text-primary) !important; }
.text-gray-600 { color: var(--sommetry-text-secondary) !important; }
.text-gray-500 { color: rgba(16, 17, 20, 0.6) !important; }
.text-red-500 { color: var(--sommetry-red-500) !important; }
.border-gray-300 { border-color: var(--sommetry-card-border) !important; }
.focus\:border-red-500:focus { border-color: var(--sommetry-red-500) !important; }
.focus\:ring-red-300:focus { box-shadow: 0 0 0 3px var(--sommetry-focus-ring) !important; }
.focus\:ring-4:focus { box-shadow: 0 0 0 3px var(--sommetry-focus-ring) !important; }
.hover\:bg-gray-200:hover { background-color: var(--sommetry-highlight) !important; }
.bg-gray-200 { background-color: var(--sommetry-highlight) !important; }

button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  background-color: var(--sommetry-button-primary-bg);
  color: var(--sommetry-button-primary-text);
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background-color: var(--sommetry-button-primary-hover);
}

:focus {
  outline: 3px solid var(--sommetry-focus-ring);
  outline-offset: 2px;
}