/* ====================================================================
   global.css — Design tokens, base variables, and utility resets
   Mirrors squarespace/styles/global.less (plain CSS, no preprocessor)
   Placeholder values — will be updated in Phase 4 from image analysis.
   ==================================================================== */

:root {
  /* ── Obsidian Protection brand palette ── */
  --color-primary:        #0a0a0a;   /* near-black page background */
  --color-secondary:      #111111;   /* alternate section background */
  --color-surface:        #141414;   /* card / panel background */
  --color-surface-raised: #1e1e1e;   /* hover/raised card state */
  --color-border:         #2a2a2a;   /* subtle dividers */

  --color-gold:           #C9A227;   /* primary brand gold */
  --color-gold-dark:      #A37E1F;   /* darker gold for hover */
  --color-gold-light:     #E0B84A;   /* lighter gold highlights */
  --color-red:            #8B1A1A;   /* shield accent red */

  --color-text:           #ffffff;   /* primary body text */
  --color-text-muted:     #aaaaaa;   /* secondary / caption text */
  --color-text-dim:       #666666;   /* very muted text */
  --color-text-inverted:  #0a0a0a;   /* text on light/gold backgrounds */

  /* Semantic aliases */
  --color-accent:        var(--color-gold);
  --color-accent-hover:  var(--color-gold-dark);
  --color-background:    var(--color-primary);

  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;
  --space-xxl:  96px;

  /* Border radius */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.16);

  /* Transitions */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.25s ease;
  --transition-slow: all 0.4s ease;

  /* Z-index scale */
  --z-base:    0;
  --z-raised:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-nav:     400;
  --z-toast:   500;
}

/* Base resets */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Respect OS-level reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body { background-color: var(--color-primary); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: transparent; font: inherit; }

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: var(--transition-fast);
}
a:hover, a:focus {
  color: var(--color-gold-light);
  text-decoration: none;
}

/* Utilities */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }