/*
Theme Name: Outside Ministries
Theme URI: https://outsideministries.com
Author: Outside Ministries Design & Engineering
Author URI: https://outsideministries.com
Description: A bespoke, lightweight, native WordPress and WooCommerce theme tailored to the Outside Ministries "Sacred Streetwear" aesthetic. Handcrafted with semantic PHP templates, vanilla JavaScript, and zero framework bloat.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: outside-ministries
Tags: e-commerce, dark-mode, custom-colors, custom-menu, featured-images, flexible-header, full-width-template
*/

/* ==========================================================================
   Stitch Color Palette & Design System Tokens
   ========================================================================== */
:root {
  /* Brand Core & Accents */
  --om-primary: #e9c176;
  --om-primary-container: #c5a059;
  --om-primary-fixed: #ffdea5;
  --om-primary-fixed-dim: #e9c176;
  --om-on-primary: #412d00;
  --om-on-primary-container: #4e3700;
  --om-on-primary-fixed: #261900;
  --om-on-primary-fixed-variant: #5d4201;
  --om-inverse-primary: #775a19;

  /* Secondary & Linen Tones */
  --om-secondary: #c9c6c0;
  --om-secondary-container: #474742;
  --om-secondary-fixed: #e5e2db;
  --om-secondary-fixed-dim: #c9c6c0;
  --om-on-secondary: #31312c;
  --om-on-secondary-container: #b7b5af;
  --om-on-secondary-fixed: #1c1c18;
  --om-on-secondary-fixed-variant: #474742;

  /* Tertiary Antique Gold */
  --om-tertiary: #e1c386;
  --om-tertiary-container: #bea268;
  --om-tertiary-fixed: #ffdf9f;
  --om-tertiary-fixed-dim: #e1c386;
  --om-on-tertiary: #402d00;
  --om-on-tertiary-container: #4c3808;
  --om-on-tertiary-fixed: #261a00;
  --om-on-tertiary-fixed-variant: #584413;

  /* Surface & Canvas Hierarchy */
  --om-background: #131313;
  --om-surface: #131313;
  --om-surface-dim: #131313;
  --om-surface-bright: #3a3939;
  --om-surface-container-lowest: #0e0e0e;
  --om-surface-container-low: #1c1b1b;
  --om-surface-container: #201f1f;
  --om-surface-container-high: #2a2a2a;
  --om-surface-container-highest: #353534;
  --om-surface-variant: #353534;

  /* Text & Foreground */
  --om-on-background: #e5e2e1;
  --om-on-surface: #e5e2e1;
  --om-on-surface-variant: #d1c5b4;
  --om-inverse-surface: #e5e2e1;
  --om-inverse-on-surface: #313030;
  --om-text-muted: #8e8a82;

  /* Outlines & Borders */
  --om-outline: #9a8f80;
  --om-outline-variant: #4e4639;
  --om-border-subdued: rgba(197, 160, 89, 0.20);
  --om-border-subdued-hover: rgba(197, 160, 89, 0.50);
  --om-border-active: #c5a059;

  /* Feedback */
  --om-error: #ffb4ab;
  --om-error-container: #93000a;
  --om-on-error: #690005;
  --om-on-error-container: #ffdad6;

  /* Typography */
  --om-font-serif: 'Playfair Display', Georgia, serif;
  --om-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Layout Boundaries */
  --om-container-max: 1440px;
  --om-margin-desktop: 3rem;
  --om-margin-mobile: 1.25rem;
  --om-gutter-desktop: 1.5rem;
  --om-gutter-mobile: 0.75rem;

  /* Spacing Scale */
  --om-space-xs: 0.25rem;
  --om-space-sm: 0.5rem;
  --om-space-md: 1rem;
  --om-space-lg: 1.75rem;
  --om-space-xl: 3rem;
  --om-space-2xl: 5rem;

  /* Corner Radii (Architectural Sharp) */
  --om-radius-none: 0px;
  --om-radius-pill: 9999px;

  /* Elevation Shadows & Frosting */
  --om-shadow-ambient: 0 20px 40px rgba(0, 0, 0, 0.80);
  --om-shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.60);
  --om-shadow-button: 0 10px 25px rgba(197, 160, 89, 0.25);
  --om-backdrop-blur: blur(16px);
  --om-backdrop-bg: rgba(14, 14, 14, 0.85);

  /* Transitions */
  --om-transition-fast: 150ms ease-out;
  --om-transition-normal: 250ms ease-out;
  --om-transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Global Resets & Normalization
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--om-background);
  color: var(--om-on-surface);
}

body {
  background-color: var(--om-background);
  color: var(--om-on-surface);
  font-family: var(--om-font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

::selection {
  background-color: var(--om-primary);
  color: var(--om-surface-container-lowest);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--om-transition-fast);
}

a:hover {
  color: var(--om-primary);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  border-radius: var(--om-radius-none);
  color: inherit;
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Screen reader text for accessibility */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}