/**
 * Purpose: Defines foundational element defaults, typography, sizing, and accessible interaction behavior shared by SobrietyWorks pages.
 * TODOs: None
 * Maintainer: John B.
 * Contact: john@sobriety.works
 */

/* Core layout, component, and interaction rules for this stylesheet's interface area. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--sw-color-canvas);
  color: var(--sw-color-text);
  font-family: var(--sw-font-sans);
  font-stretch: normal;
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

h1,
h2,
h3,
h4,
h5,
h6,
nav,
nav a,
button,
.btn,
[role="button"] {
  font-family: var(--sw-font-sans);
  font-weight: 600;
}

input,
select,
textarea,
table,
blockquote,
figcaption,
caption,
small,
.small {
  font-family: var(--sw-font-sans);
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--sw-color-action);
}

a:hover {
  color: var(--sw-color-action-hover);
}

button,
input,
select,
textarea {
  font-family: var(--sw-font-sans);
  font-size: var(--font-size-control);
  line-height: var(--line-height-control);
}

button,
.btn,
[role="button"] {
  font-weight: 600;
}

small,
.small,
figcaption,
caption {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

table,
blockquote {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.btn {
  border-radius: var(--sw-radius-control);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sw-color-action);
  outline-offset: 5px;
}

p {
  margin: 0;
}

.btn-primary {
  --bs-btn-bg: var(--sw-color-action);
  --bs-btn-border-color: var(--sw-color-action);
  --bs-btn-color: var(--sw-color-on-action);
  --bs-btn-hover-bg: var(--sw-color-action-hover);
  --bs-btn-hover-border-color: var(--sw-color-action-hover);
  --bs-btn-hover-color: var(--sw-color-on-action);
  --bs-btn-active-bg: var(--sw-color-action-active);
  --bs-btn-active-border-color: var(--sw-color-action-active);
  --bs-btn-disabled-bg: var(--sw-color-action);
  --bs-btn-disabled-border-color: var(--sw-color-action);
}

.btn-outline-primary {
  --bs-btn-color: var(--sw-color-action);
  --bs-btn-border-color: var(--sw-color-action);
  --bs-btn-hover-bg: var(--sw-color-action);
  --bs-btn-hover-border-color: var(--sw-color-action);
  --bs-btn-hover-color: var(--sw-color-on-action);
  --bs-btn-active-bg: var(--sw-color-action-active);
  --bs-btn-active-border-color: var(--sw-color-action-active);
}

.btn-secondary,
.btn-outline-secondary {
  --bs-btn-bg: var(--sw-color-surface);
  --bs-btn-border-color: var(--sw-color-border-control);
  --bs-btn-color: var(--sw-color-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sw-color-surface) 72%, var(--sw-color-border));
  --bs-btn-hover-border-color: var(--sw-color-text-muted);
  --bs-btn-hover-color: var(--sw-color-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--sw-color-surface) 64%, var(--sw-color-border));
  --bs-btn-active-border-color: var(--sw-color-text-muted);
  --bs-btn-active-color: var(--sw-color-text);
  --bs-btn-disabled-bg: var(--sw-color-surface);
  --bs-btn-disabled-border-color: var(--sw-color-border);
  --bs-btn-disabled-color: var(--sw-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}