/* SISU Design Tokens */
:root {
  --color-brand-emerald: #0f5132;
  --color-brand-emerald-rgb: 15 81 50;
  --color-brand-gold: #d4af37;
  --color-brand-gold-rgb: 212 175 55;
  --color-brand-sand: #f8f5f2;
  --color-brand-black: #18181b;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  --color-primary-soft-bg: #064e3b;
  --color-primary-soft-bg-50: rgba(6, 78, 59, 0.5);
  --color-primary-soft-text: #b2c7bd;
  --color-primary-border: #5c8974;
  --color-accent-soft-bg: #3b310f;
  --color-accent-soft-text: #e4cd83;
  --color-page-canvas: var(--color-brand-sand);
  --color-surface-950: #ffffff;
  --color-surface-950-rgb: 255 255 255;
  --color-surface-900: #f6efe7;
  --color-surface-900-rgb: 246 239 231;
  --color-surface-800: #ebe0d2;
  --color-surface-800-rgb: 235 224 210;
  --color-surface-border: #d6c9bc;
  --color-surface-border-strong: #b8a590;
  --color-surface-text: #18181b;
  --color-surface-text-rgb: 24 24 27;
  --color-surface-muted: #57534e;
  --color-accent-text: #765f11;
  --color-accent-text-rgb: 118 95 17;
  --color-accent-contrast: var(--color-brand-black);
  --color-primary-contrast: #ffffff;
  --color-control-bg: #ffffff;
  --color-control-bg-rgb: 255 255 255;
  --color-control-text: var(--color-surface-text);
  --color-control-border: var(--color-surface-border-strong);
  --color-button-neutral-bg: var(--color-brand-emerald);
  --color-button-neutral-bg-rgb: var(--color-brand-emerald-rgb);
  --color-button-neutral-text: #ffffff;
  --color-button-neutral-border: var(--color-brand-emerald);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --touch-target-min: 46px;
}
* { border-radius: 0 !important; }
body { font-family: 'Inter', sans-serif; margin: 0; background: var(--color-page-canvas); color: var(--color-surface-text); }
.font-display { font-family: 'Playfair Display', serif; }
.font-arabic { font-family: 'Noto Kufi Arabic', 'Inter', sans-serif; }

/* ── Keyboard navigation: focus-visible ring ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 2px;
  border-radius: 2px !important;
}
/* Suppress focus ring on mouse click */
:focus:not(:focus-visible) {
  outline: none;
}

/* Theme-aware contrast primitives */
.sis-theme-heading {
  color: var(--color-surface-text, #18181b) !important;
}

.sis-theme-muted {
  color: var(--color-surface-muted, #57534e) !important;
}

.sis-theme-accent {
  color: var(--color-accent-text, var(--color-brand-gold)) !important;
}

.sis-btn-primary,
a.sis-btn-primary,
button.sis-btn-primary,
input[type='submit'].sis-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-brand-gold);
  background: var(--color-brand-gold);
  color: var(--color-accent-contrast, #050505) !important;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

.sis-btn-primary:hover,
.sis-btn-primary:focus-visible {
  color: var(--color-accent-contrast, #050505) !important;
  filter: brightness(0.96);
}

.sis-btn-secondary,
a.sis-btn-secondary,
button.sis-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-control-border, #b8a590);
  background: rgb(var(--color-surface-950-rgb, 255 255 255) / 0.64);
  color: var(--color-surface-text, #18181b) !important;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sis-btn-secondary:hover,
.sis-btn-secondary:focus-visible {
  border-color: var(--color-accent-text, var(--color-brand-gold));
  color: var(--color-accent-text, var(--color-brand-gold)) !important;
  background: rgb(var(--color-surface-950-rgb, 255 255 255) / 0.86);
}

.sis-btn-neutral,
a.sis-btn-neutral,
button.sis-btn-neutral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-button-neutral-border, var(--color-button-neutral-bg));
  background: var(--color-button-neutral-bg, #0f5132);
  color: var(--color-button-neutral-text, #ffffff) !important;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

.sis-btn-neutral:hover,
.sis-btn-neutral:focus-visible {
  color: var(--color-button-neutral-text, #ffffff) !important;
  filter: brightness(1.04);
}

.sis-theme-field,
input.sis-theme-field,
textarea.sis-theme-field,
select.sis-theme-field {
  border: 1px solid var(--color-control-border, #b8a590);
  background: var(--color-control-bg, #ffffff);
  color: var(--color-control-text, #18181b) !important;
  caret-color: var(--color-control-text, #18181b);
}

.sis-theme-field::placeholder,
input.sis-theme-field::placeholder,
textarea.sis-theme-field::placeholder {
  color: rgb(var(--color-surface-text-rgb, 24 24 27) / 0.48);
}

.sis-theme-field:focus,
input.sis-theme-field:focus,
textarea.sis-theme-field:focus,
select.sis-theme-field:focus {
  border-color: var(--color-accent-text, var(--color-brand-gold));
  box-shadow: 0 0 0 3px rgb(var(--color-accent-text-rgb, 118 95 17) / 0.14);
}

.sis-spam-check {
  border: 1px solid var(--color-control-border, #b8a590);
  background: rgb(var(--color-control-bg-rgb, 255 255 255) / 0.76);
  color: var(--color-surface-text, #18181b) !important;
}

.sis-spam-check input,
.sis-spam-check select {
  border: 1px solid var(--color-control-border, #b8a590);
  background: var(--color-control-bg, #ffffff);
  color: var(--color-control-text, #18181b) !important;
  caret-color: var(--color-control-text, #18181b);
}