/**
 * Purpose: Defines the global design tokens for SobrietyWorks color, typography, spacing, shape, elevation, and motion.
 * TODOs: None
 * Maintainer: John B.
 * Contact: john@sobriety.works
 */

/* Core layout, component, and interaction rules for this stylesheet's interface area. */
/* Global custom properties define the design values consumed by downstream rules. */
:root {
  --color-page: #fefdfc;
  --color-surface: #f0efee;
  --color-surface-raised: #ffffff;
  --color-text: #25221e;
  --color-text-muted: #777572;
  --color-border: #dddcda;
  --color-border-soft: #eae9e8;
  --productui-primary-theme-color: #2e6f68;
  --color-primary-hover: #255b56;
  --color-primary-active: #1f4e4a;
  --color-primary-soft: #eaf3f1;
  --color-on-primary: #ffffff;

  --sw-color-canvas: var(--color-page);
  --sw-color-surface-muted: var(--color-surface);
  --sw-color-surface-raised: var(--color-surface-raised);
  --sw-color-surface: var(--color-surface-raised);
  --sw-color-text: var(--color-text);
  --sw-color-text-muted: var(--color-text-muted);
  --sw-color-border: var(--color-border);
  --sw-color-border-soft: var(--color-border-soft);
  --sw-color-border-control: var(--color-border);
  --sw-color-action: var(--productui-primary-theme-color);
  --sw-color-action-hover: var(--color-primary-hover);
  --sw-color-action-active: var(--color-primary-active);
  --sw-color-action-soft: var(--color-primary-soft);
  --sw-color-success: var(--productui-primary-theme-color);
  --sw-color-success-text: var(--color-primary-active);
  --sw-color-success-border: var(--productui-primary-theme-color);
  --sw-color-success-surface: var(--color-primary-soft);
  --sw-color-info: var(--productui-primary-theme-color);
  --sw-color-info-text: var(--color-primary-active);
  --sw-color-info-border: var(--productui-primary-theme-color);
  --sw-color-info-surface: var(--color-primary-soft);
  --sw-color-warning: var(--color-text-muted);
  --sw-color-warning-text: var(--color-text);
  --sw-color-warning-border: var(--color-text-muted);
  --sw-color-warning-surface: var(--color-surface);
  --sw-color-danger: #9b4138;
  --sw-color-danger-text: #75322c;
  --sw-color-danger-border: #9b4138;
  --sw-color-danger-surface: #f8e9e5;
  --sw-color-on-dark: var(--color-page);
  --sw-color-on-action: var(--color-on-primary);

  --sw-rgb-canvas: 254 253 252;
  --sw-rgb-surface: 255 255 255;
  --sw-rgb-text: 37 34 30;
  --sw-rgb-action: 46 111 104;
  --sw-rgb-success: 46 111 104;
  --sw-rgb-info: 46 111 104;
  --sw-rgb-warning: 119 117 114;
  --sw-rgb-danger: 155 65 56;
  --sw-rgb-on-dark: 254 253 252;

  --sw-steamed-glass-overlay: rgb(var(--sw-rgb-surface) / 0.64);
  --sw-steamed-glass-filter: blur(18px) saturate(0.72);

  --sw-radius-small: 3px;
  --sw-radius-control: 5px;
  --sw-radius-panel: 7px;
  --sw-radius-round: 999px;

  --sw-font-sans: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --sw-mobile-nav-duration: 420ms;
  --sw-mobile-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sw-header-height: 64px;
  --sw-scrollbar-gutter: 0px;
  --sw-content-width: 980px;

  --font-size-hero: 55px;
  --line-height-hero: 63px;
  --font-size-page-title: 44px;
  --line-height-page-title: 51px;
  --font-size-section-title: 38px;
  --line-height-section-title: 49px;
  --font-size-lead: 21px;
  --line-height-lead: 33px;
  --font-size-body: 16px;
  --line-height-body: 25px;
  --font-size-control: 15.5px;
  --line-height-control: 22px;
  --font-size-small: 14px;
  --line-height-small: 20px;

  /* Bootstrap's compiled theme API. */
  --bs-primary: var(--sw-color-action);
  --bs-primary-rgb: 46, 111, 104;
  --bs-secondary: var(--sw-color-text-muted);
  --bs-secondary-rgb: 119, 117, 114;
  --bs-success: var(--sw-color-success);
  --bs-success-rgb: 46, 111, 104;
  --bs-info: var(--sw-color-info);
  --bs-info-rgb: 46, 111, 104;
  --bs-warning: var(--sw-color-warning);
  --bs-warning-rgb: 119, 117, 114;
  --bs-danger: var(--sw-color-danger);
  --bs-danger-rgb: 155, 65, 56;
  --bs-success-text-emphasis: var(--sw-color-success-text);
  --bs-success-bg-subtle: var(--sw-color-success-surface);
  --bs-success-border-subtle: var(--sw-color-success-border);
  --bs-info-text-emphasis: var(--sw-color-info-text);
  --bs-info-bg-subtle: var(--sw-color-info-surface);
  --bs-info-border-subtle: var(--sw-color-info-border);
  --bs-warning-text-emphasis: var(--sw-color-warning-text);
  --bs-warning-bg-subtle: var(--sw-color-warning-surface);
  --bs-warning-border-subtle: var(--sw-color-warning-border);
  --bs-danger-text-emphasis: var(--sw-color-danger-text);
  --bs-danger-bg-subtle: var(--sw-color-danger-surface);
  --bs-danger-border-subtle: var(--sw-color-danger-border);
  --bs-light: var(--sw-color-canvas);
  --bs-light-rgb: 254, 253, 252;
  --bs-dark: var(--sw-color-text);
  --bs-dark-rgb: 37, 34, 30;
  --bs-body-bg: var(--sw-color-canvas);
  --bs-body-bg-rgb: 254, 253, 252;
  --bs-body-color: var(--sw-color-text);
  --bs-body-color-rgb: 37, 34, 30;
  --bs-secondary-color: var(--sw-color-text-muted);
  --bs-border-color: var(--sw-color-border);
  --bs-link-color: var(--sw-color-action);
  --bs-link-hover-color: var(--sw-color-action-hover);
  --bs-form-valid-color: var(--sw-color-success-text);
  --bs-form-valid-border-color: var(--sw-color-success-border);
  --bs-form-invalid-color: var(--sw-color-danger-text);
  --bs-form-invalid-border-color: var(--sw-color-danger-border);
  --bs-border-radius: var(--sw-radius-control);
  --bs-border-radius-sm: var(--sw-radius-small);
  --bs-border-radius-lg: var(--sw-radius-panel);
}

@media (max-width: 1068px) {

  :root {
    --sw-content-width: 692px;
  }
}

@media (max-width: 734px) {

  :root {
    --sw-content-width: 87.5vw;
    --font-size-hero: 37px;
    --line-height-hero: 44px;
    --font-size-page-title: 34px;
    --line-height-page-title: 41px;
    --font-size-section-title: 29px;
    --line-height-section-title: 37px;
    --font-size-lead: 18px;
    --line-height-lead: 29px;
  }
}