@font-face {
  font-family: "Miguer Sans";
  src: url("../assets/MiguerSans-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: light;

  --sc-color-brand-sage: #ccd0c5;
  --sc-color-brand-earth: #615741;
  --sc-color-brand-gold: #a58d3f;
  --sc-color-brand-cart: #163822;
  --sc-color-brand-terracotta: #7e381f;
  --sc-color-cream-50: #fdfcf9;
  --sc-color-cream-100: #f8f7f3;
  --sc-color-cream-200: #ebece6;
  --sc-color-black: #211d17;
  --sc-color-gray-50: #fafaf8;
  --sc-color-gray-100: #eeeee9;
  --sc-color-gray-300: #ccd0c5;
  --sc-color-gray-500: #888377;
  --sc-color-gray-600: #615b50;
  --sc-color-gray-800: #373229;
  --sc-color-white: #ffffff;
  --sc-color-gold-400: #bca75f;
  --sc-color-gold-500: #a58d3f;
  --sc-color-gold-700: #766323;
  --sc-color-success: #2d6a45;
  --sc-color-warning: #936b16;
  --sc-color-danger: #9f3030;
  --sc-color-info: #335f7e;

  --sc-color-surface: var(--sc-color-cream-100);
  --sc-color-surface-raised: var(--sc-color-white);
  --sc-color-surface-subtle: var(--sc-color-cream-50);
  --sc-color-surface-muted: var(--sc-color-cream-200);
  --sc-color-surface-inverse: var(--sc-color-brand-earth);
  --sc-color-text: var(--sc-color-black);
  --sc-color-text-muted: var(--sc-color-gray-600);
  --sc-color-text-soft: var(--sc-color-gray-500);
  --sc-color-text-inverse: var(--sc-color-white);
  --sc-color-border: color-mix(in srgb, var(--sc-color-black) 14%, transparent);
  --sc-color-border-strong: color-mix(in srgb, var(--sc-color-black) 32%, transparent);
  --sc-color-action: var(--sc-color-brand-terracotta);
  --sc-color-action-hover: #682d19;
  --sc-color-action-active: var(--sc-color-brand-earth);
  --sc-color-accent: var(--sc-color-gold-500);
  --sc-color-focus: var(--sc-color-gold-700);
  --sc-color-overlay: rgb(17 17 17 / 52%);
  --sc-color-selection: color-mix(in srgb, var(--sc-color-gold-400) 35%, white);

  --sc-font-display: "Miguer Sans", Georgia, "Times New Roman", serif;
  --sc-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sc-font-mono: "SFMono-Regular", Consolas, monospace;
  --sc-font-size-00: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --sc-font-size-0: clamp(0.8125rem, 0.78rem + 0.14vw, 0.875rem);
  --sc-font-size-1: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);
  --sc-font-size-2: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --sc-font-size-3: clamp(1.25rem, 1.12rem + 0.62vw, 1.5rem);
  --sc-font-size-4: clamp(1.5rem, 1.3rem + 0.96vw, 2rem);
  --sc-font-size-5: clamp(1.875rem, 1.48rem + 1.9vw, 2.875rem);
  --sc-font-size-6: clamp(2.25rem, 1.62rem + 3vw, 4rem);
  --sc-font-size-display: clamp(2.75rem, 1.85rem + 4.2vw, 5.5rem);
  --sc-line-height-tight: 1.05;
  --sc-line-height-heading: 1.16;
  --sc-line-height-body: 1.6;
  --sc-line-height-ui: 1.3;
  --sc-letter-spacing-tight: -0.025em;
  --sc-letter-spacing-body: -0.008em;
  --sc-letter-spacing-wide: 0.08em;
  --sc-letter-spacing-wider: 0.16em;
  --sc-font-weight-regular: 400;
  --sc-font-weight-medium: 500;
  --sc-font-weight-semibold: 600;

  --sc-space-0: 0;
  --sc-space-1: 0.125rem;
  --sc-space-2: 0.25rem;
  --sc-space-3: 0.5rem;
  --sc-space-4: 0.75rem;
  --sc-space-5: 1rem;
  --sc-space-6: 1.5rem;
  --sc-space-7: 2rem;
  --sc-space-8: 3rem;
  --sc-space-9: 4rem;
  --sc-space-10: 6rem;
  --sc-space-11: 8rem;
  --sc-space-section: clamp(4.5rem, 3.2rem + 6vw, 9rem);
  --sc-space-section-compact: clamp(3rem, 2.25rem + 3vw, 5rem);
  --sc-space-page-inline: clamp(1rem, 0.35rem + 3vw, 3.5rem);
  --sc-space-grid: clamp(0.75rem, 0.3rem + 1.75vw, 2rem);

  --sc-container-reading: 42rem;
  --sc-container-compact: 64rem;
  --sc-container-default: 80rem;
  --sc-container-wide: 96rem;
  --sc-container-editorial: 112rem;

  --sc-size-control-sm: 2.5rem;
  --sc-size-control-md: 3rem;
  --sc-size-control-lg: 3.5rem;
  --sc-size-icon-sm: 1rem;
  --sc-size-icon-md: 1.25rem;
  --sc-size-icon-lg: 1.5rem;
  --sc-size-touch: 2.75rem;

  --sc-border-width: 1px;
  --sc-border-width-strong: 2px;
  --sc-radius-none: 0;
  --sc-radius-xs: 0.125rem;
  --sc-radius-sm: 0.25rem;
  --sc-radius-md: 0.5rem;
  --sc-radius-lg: 0.875rem;
  --sc-radius-pill: 999rem;

  --sc-shadow-xs: 0 1px 2px rgb(17 17 17 / 5%);
  --sc-shadow-sm: 0 8px 24px rgb(17 17 17 / 7%);
  --sc-shadow-md: 0 18px 55px rgb(17 17 17 / 11%);
  --sc-shadow-overlay: 0 30px 80px rgb(17 17 17 / 18%);
  --sc-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--sc-color-focus) 28%, transparent);

  --sc-duration-instant: 100ms;
  --sc-duration-fast: 180ms;
  --sc-duration-standard: 280ms;
  --sc-duration-slow: 500ms;
  --sc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sc-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --sc-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --sc-transition-color: color var(--sc-duration-fast) var(--sc-ease-standard), background-color var(--sc-duration-fast) var(--sc-ease-standard), border-color var(--sc-duration-fast) var(--sc-ease-standard);
  --sc-transition-transform: transform var(--sc-duration-standard) var(--sc-ease-standard);

  --sc-z-base: 0;
  --sc-z-raised: 10;
  --sc-z-dropdown: 400;
  --sc-z-sticky: 500;
  --sc-z-overlay: 700;
  --sc-z-modal: 800;
  --sc-z-toast: 900;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sc-duration-instant: 1ms;
    --sc-duration-fast: 1ms;
    --sc-duration-standard: 1ms;
    --sc-duration-slow: 1ms;
  }
}