/* CSS Variables */
:root {
  --primary-blue: #075282;
  --primary-blue-light: #E8F1F8;
  --primary-blue-dark: #053D61;
  --accent-orange: #FFA41B;
  --success-green: #1A9E6A;
  --success-green-light: #E8F5E9;
  --danger-red: #D94040;
  --danger-red-light: #FFEBEE;
  --muted-text: #5A7A8F;
  --body-text: #1A2733;
  --border: #CDDAEA;
  --page-bg: #F4F7FA;
  --card-bg: #FFFFFF;
  
  --pillar-organic: #075282;
  --pillar-website: #1A9E6A;
  --pillar-market: #FFA41B;
  
  --grade-a-bg: #E8F5E9;
  --grade-a-text: #2E7D32;
  --grade-b-bg: #E3F2FD;
  --grade-b-text: #1565C0;
  --grade-c-bg: #FFF8E1;
  --grade-c-text: #F57F17;
  --grade-d-bg: #FFF3E0;
  --grade-d-text: #E65100;
  --grade-f-bg: #FFEBEE;
  --grade-f-text: #C62828;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--body-text);
  background-color: var(--page-bg);
  line-height: 1.5;
}

h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--body-text);
}

h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--body-text);
}

h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--body-text);
}

/* Form Elements */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
textarea,
select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--body-text);
  background: white;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(7, 82, 130, 0.2);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-text);
  opacity: 0.6;
}

/* Buttons */
button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  transition: all 150ms ease;
}

.btn-primary {
  height: 44px;
  padding: 0 20px;
  background: var(--primary-blue);
  color: white;
  border: none;
}

.btn-primary:hover {
  background: var(--primary-blue-dark);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-outlined {
  height: 40px;
  padding: 0 16px;
  background: transparent;
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
}

.btn-outlined:hover {
  background: var(--primary-blue);
  color: white;
}

.btn-orange {
  background: var(--accent-orange);
  color: white;
}

.btn-orange:hover {
  background: #E89310;
}

.btn-green {
  background: var(--success-green);
  color: white;
}

.btn-green:hover {
  background: #158A5C;
}

.btn-red {
  background: var(--danger-red);
  color: white;
}

.btn-red:hover {
  background: #C23636;
}

/* Links */
a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 120ms ease;
}

a:hover {
  color: var(--primary-blue-dark);
}

/* Utility Classes */
.text-muted {
  color: var(--muted-text);
}

.text-small {
  font-size: 12px;
}

.text-tiny {
  font-size: 11px;
}

.text-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}