/* ==========================================================================
   LOOC design tokens: colors, fonts, sizes.
   Loaded on every page (inc/assets.php) so the site-wide chrome (css/looc-site.css)
   and the redesigned pages (css/looc-ui.css) share one source of truth.
   ========================================================================== */

:root {
  --looc-navy-950: #060a22;
  --looc-navy-900: #0a1033;
  --looc-navy-800: #0e1645;
  --looc-navy-700: #132665;
  --looc-navy-600: #1c2f75;
  --looc-royal: #000080;
  --looc-gold: #fc9f13;
  --looc-gold-hover: #ffb240;
  --looc-gold-soft: #f7c26a;
  --looc-cream: #f3ead8;

  --looc-ink: #ffffff;
  --looc-body: #dfe3f5;
  --looc-muted: #b4bcdc;
  --looc-dim: #8a93ba;
  --looc-line: rgba(255, 255, 255, 0.14);
  --looc-line-2: rgba(255, 255, 255, 0.22);
  --looc-surface: rgba(255, 255, 255, 0.04);

  --looc-font-display: 'Cinzel', serif;
  --looc-font-body: 'Raleway', sans-serif;

  --looc-radius-sm: 10px;
  --looc-radius: 14px;
  --looc-radius-lg: 20px;
  --looc-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  --looc-shadow-art: 0 30px 80px rgba(0, 0, 0, 0.55);

  --looc-wrap: 1200px;
  --looc-gutter: 24px;
  --looc-section-y: 72px;

  --looc-nav-h: 72px; /* measured by js/looc-ui.js */
}