/* Minimal helpers complementing Tailwind */

:root {
  /* Brand palette tuned to sky blue */
  --brand-900: #1f4f82; /* deep sky */
  --brand-700: #2f8fdd; /* bright sky */
  --brand-400: #87ceeb; /* classic sky blue */
  --brand-100: #e6f5ff; /* pale sky */

  /* Semantic tokens */
  --text-color: #0f172a;
  --muted-color: #1e3a5f;
  --subtle-color: #3d7fbf;
  --surface: #ffffff;
  --surface-2: var(--brand-100);
  --surface-soft: #f0f8ff;
  --surface-3: #f5faff;
  --surface-border: #c8e6ff;
  --accent: var(--brand-700);
  --accent-strong: var(--brand-900);
  --gradient-from: #d4f0ff;
  --gradient-to: #f0f8ff;
}

.btn-primary {
  background-color: var(--accent);
  color: #ffffff;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  line-height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary:hover { background-color: var(--accent-strong); }

.btn-secondary {
  background-color: var(--surface-2);
  color: var(--text-color);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  line-height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-link { color: var(--text-color); font-weight: 500; }
.nav-link:hover { color: var(--brand-900); }

.link { color: var(--accent); text-decoration: underline; }
.link:hover { color: var(--accent-strong); }

.form-input, .form-select, .form-textarea {
  background: var(--surface-2);
  border-radius: 12px;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; box-shadow: none; }

/* Cards */
.card { border: 1px solid var(--surface-border); border-radius: 14px; background: var(--surface); }
.card:hover { box-shadow: 0 8px 20px rgba(15,23,42,0.08); }

/* Tailwind override for arbitrary color utilities used in markup */
.text-\[\#141811\] { color: var(--text-color) !important; }
.text-\[\#3e4933\] { color: var(--muted-color) !important; }
.text-\[\#758961\] { color: var(--subtle-color) !important; }
.bg-\[\#f2f4f0\] { background-color: var(--surface-2) !important; }
.border-\[\#f2f4f0\] { border-color: var(--surface-border) !important; }
.bg-\[\#72d411\] { background-color: #72d411 !important; }

/* Brand logo */
.brand-logo { height: 28px; width: auto; object-fit: contain; }
@media (min-width: 768px) { .brand-logo { height: 32px; } }

.bg-\[\#fbfdf8\] { background-color: var(--surface-soft) !important; }
.bg-\[\#f9fbf6\] { background-color: var(--surface-3) !important; }

.from-\[\#ecf6e3\] {
  --tw-gradient-from: var(--gradient-from) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(212 240 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[\#f9fbf6\] { --tw-gradient-to: var(--gradient-to) var(--tw-gradient-to-position); }

/* Background Patterns */
.bg-pattern-green {
  background: linear-gradient(0deg, rgba(114, 212, 17, 0.06), rgba(47, 143, 221, 0.04)),
              url('../img/brand/pattern-green.png');
  background-repeat: repeat;
  background-size: 150px 150px;
  background-blend-mode: multiply;
}

.bg-pattern-green-subtle {
  background: linear-gradient(0deg, rgba(114, 212, 17, 0.04), rgba(47, 143, 221, 0.02)),
              url('../img/brand/pattern-green.png');
  background-repeat: repeat;
  background-size: 200px 200px;
  background-blend-mode: multiply;
}

.bg-pattern-green-gradient {
  background:
    linear-gradient(135deg, rgba(47, 143, 221, 0.16) 0%, rgba(114, 212, 17, 0.18) 40%, rgba(255, 255, 255, 0.9) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.55)),
    url('../img/brand/pattern-green.png');
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, 200px 200px;
  background-position: center;
  background-blend-mode: multiply, normal, normal;
}

.bg-gradient-green {
  background: linear-gradient(135deg, #ecf6e3 0%, #f9fbf6 50%, #e8f5e8 100%);
}

.bg-pattern-overlay {
  background: linear-gradient(135deg, rgba(114, 212, 17, 0.05), rgba(47, 143, 221, 0.02)),
              url('../img/brand/pattern-green.png');
  background-blend-mode: multiply;
  background-repeat: repeat;
  background-size: 180px 180px;
}