:root {
  --sota-bg-0: #f6efe2;
  --sota-bg-1: #fdfaf5;
  --sota-bg-2: #ebe1cf;
  --sota-surface: #fffdf9;
  --sota-surface-soft: #f8f2e8;
  --sota-surface-strong: #ffffff;
  --sota-ink: #0d1b19;
  --sota-ink-soft: #354946;
  --sota-ink-muted: #5d736f;
  --sota-brand: #0f4c4b;
  --sota-brand-2: #1d7d7b;
  --sota-warm: #dca24f;
  --sota-danger: #c94444;
  --sota-success: #1f9a62;
  --sota-line: rgba(13, 27, 25, 0.14);
  --sota-line-strong: rgba(13, 27, 25, 0.2);
  --sota-shadow-xs: 0 2px 10px rgba(13, 27, 25, 0.08);
  --sota-shadow-sm: 0 10px 22px rgba(13, 27, 25, 0.11);
  --sota-shadow-md: 0 18px 42px rgba(13, 27, 25, 0.16);
  --sota-shadow-lg: 0 30px 70px rgba(13, 27, 25, 0.2);
  --sota-radius-sm: 12px;
  --sota-radius-md: 16px;
  --sota-radius-lg: 22px;
  --sota-radius-xl: 28px;
  --sota-focus: 0 0 0 3px rgba(15, 76, 75, 0.26), 0 0 0 6px rgba(220, 162, 79, 0.16);
  --sota-nav-height: 68px;
}

body.clicka-sota {
  --font-family-base: "Sora", sans-serif;
  --font-family-display: "Space Grotesk", sans-serif;
  --background-color: var(--sota-bg-0);
  --surface-color: var(--sota-surface);
  --text-color: var(--sota-ink);
  --text-color-light: var(--sota-ink-soft);
  --text-color-lighter: var(--sota-ink-muted);
  --primary-color: var(--sota-brand);
  --primary-color-light: var(--sota-brand-2);
  --primary-color-dark: #083130;
  --secondary-color: var(--sota-warm);
  --border-color: var(--sota-line);
  --shadow-sm: var(--sota-shadow-xs);
  --shadow-md: var(--sota-shadow-sm);
  --shadow-lg: var(--sota-shadow-md);
  --shadow-focus: var(--sota-focus);
  background: radial-gradient(1200px 700px at -10% -30%, rgba(15, 76, 75, 0.2), rgba(15, 76, 75, 0) 62%),
    radial-gradient(1200px 860px at 110% -10%, rgba(220, 162, 79, 0.26), rgba(220, 162, 79, 0) 64%),
    linear-gradient(180deg, var(--sota-bg-1) 0%, var(--sota-bg-0) 52%, var(--sota-bg-2) 100%);
  color: var(--sota-ink);
}

body.clicka-sota .icon {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-block;
  vertical-align: middle;
}

body.clicka-sota .icon-sm {
  width: 1rem;
  height: 1rem;
}

body.clicka-sota * {
  scrollbar-color: rgba(13, 27, 25, 0.34) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}

body.clicka-sota *:focus-visible {
  outline: none;
  box-shadow: var(--sota-focus);
}

body.clicka-sota .btn-icon .icon {
  pointer-events: none;
}