:root {
  color-scheme: light;
  --tmana-font: "Cairo", Tahoma, Arial, sans-serif;
  --tmana-navy-950: #06285a;
  --tmana-navy-900: #092f66;
  --tmana-navy-800: #0d3f7c;
  --tmana-ink: #0b2447;
  --tmana-ink-soft: #263f64;
  --tmana-muted: #61708a;
  --tmana-gold: #dda62f;
  --tmana-gold-dark: #9a6809;
  --tmana-gold-soft: #fff1ce;
  --tmana-paper: #fcfdff;
  --tmana-surface: #ffffff;
  --tmana-surface-muted: #f4f7fb;
  --tmana-sand: #f7f2e5;
  --tmana-line: rgba(6, 40, 90, 0.13);
  --tmana-line-strong: rgba(6, 40, 90, 0.2);
  --tmana-focus: rgba(221, 166, 47, 0.46);
  --tmana-radius-sm: 13px;
  --tmana-radius-md: 20px;
  --tmana-radius-lg: 30px;
  --tmana-shadow-sm: 0 12px 34px rgba(6, 40, 90, 0.09);
  --tmana-shadow-md: 0 20px 50px rgba(6, 40, 90, 0.12);
  --tmana-shadow-lg: 0 28px 80px rgba(6, 40, 90, 0.15);
  --tmana-transition: 180ms ease;
  --tmana-control-height: 44px;
  --tmana-control-radius: 13px;
  --tmana-control-bg: #fbfcfe;
  --tmana-control-border: var(--tmana-line);
  --tmana-button-bg: var(--tmana-navy-950);
}

*,
*::before,
*::after { box-sizing: border-box; }

body,
button,
input,
select,
textarea { font-family: var(--tmana-font); }

button,
input,
select,
textarea { font: inherit; }

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  border: 1px solid var(--tmana-control-border);
  border-radius: var(--tmana-control-radius);
  background: var(--tmana-control-bg);
}

:where(.button, .button-link, .secondary-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tmana-control-radius);
  font-weight: 700;
  transition:
    transform var(--tmana-transition),
    box-shadow var(--tmana-transition),
    border-color var(--tmana-transition),
    background var(--tmana-transition);
}

:where(.button, .button-link, .secondary-button):hover { transform: translateY(-1px); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--tmana-focus);
  outline-offset: 3px;
}

::selection {
  color: var(--tmana-navy-950);
  background: rgba(221, 166, 47, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}