/**
 * Circle of Leaders — site stylesheet (spec §4).
 * Works with Remix UI @layer rmx component styles; provides tokens, reset, and
 * data-attribute fallbacks so pages stay styled even without client JS.
 */
@layer base, rmx-reset, rmx;

@layer base {
  :root {
    --col-gold: #d4af37;
    --col-gold-dark: #b8941f;
    --col-gold-accent: #f4e4c1;
    --col-black: #1a1a1a;
    --col-off-white: #f9f9f7;
    --col-warm-gray: #666666;
    --col-light-gray: #e8e8e8;
    --col-champagne: #d4af37;
    --col-champagne-bright: #b8941f;
    --col-ink: #1a1a1a;
    --col-deep: #1a1a1a;
    --col-espresso: #242424;
    --col-stone: #666666;
    --col-parchment: #f9f9f7;
    --col-ivory: #f9f9f7;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
  }

  body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.7;
    color: var(--col-black);
    background-color: var(--col-off-white);
    min-height: 100vh;
  }

  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  :where(img, svg, video) {
    display: block;
    max-width: 100%;
    height: auto;
  }

  a {
    color: inherit;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
    margin: 0;
  }

  button,
  select {
    text-transform: none;
  }

  ul,
  ol {
    list-style: none;
    padding: 0;
  }

  /* Layout fallbacks (mirror design system §4.3–4.4) */
  [data-col-header] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(26, 26, 26, 0.98);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  }

  [data-col-header-mobile] {
    background: var(--col-black);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  }

  [data-col-event-nav] {
    position: sticky;
    top: 85px;
    z-index: 90;
    background: var(--col-black);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  }

  [data-col-footer] {
    background: var(--col-black);
    color: var(--col-warm-gray);
    padding: 64px 0 32px;
  }

  [data-col-section='light'] {
    padding: 80px 0;
    background: var(--col-off-white);
    color: var(--col-black);
  }

  [data-col-section='dark'] {
    padding: 80px 0;
    background: var(--col-black);
    color: var(--col-off-white);
  }

  [data-col-hero] {
    background: var(--col-black);
    color: var(--col-off-white);
    text-align: center;
    padding: 96px 0 72px;
  }

  [data-col-hero='photo'] {
    background-size: cover;
    background-position: center;
    text-align: center;
  }

  [data-col-container] {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
  }

  [data-col-container='narrow'] {
    max-width: 720px;
  }

  [data-col-card] {
    background: var(--col-off-white);
    padding: 32px;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(26, 26, 26, 0.08);
  }

  [data-col-card='dark'] {
    background: var(--col-espresso);
  }

  [data-col-divider] {
    border: none;
    width: 48px;
    height: 1px;
    background: var(--col-gold);
    margin: 0 0 24px;
  }

  [data-col-divider='centered'] {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }

  [data-col-text-link] {
    color: var(--col-gold);
    text-decoration: underline;
    text-decoration-color: var(--col-gold);
    text-underline-offset: 3px;
  }

  [data-col-text-link]:hover {
    color: var(--col-gold-dark);
  }

  [data-col-text-link]:hover [data-col-link-arrow] {
    transform: translateX(4px);
  }

  [data-col-link-arrow] {
    display: inline-block;
    transition: transform 150ms ease;
  }

  [data-col-badge] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--col-black);
    color: var(--col-gold);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  [data-col-btn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.7;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  }

  [data-col-btn='primary'] {
    background: var(--col-gold);
    color: var(--col-black);
  }

  [data-col-btn='primary']:hover {
    background: var(--col-gold-dark);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
  }

  [data-col-btn='secondary'] {
    background: transparent;
    color: var(--col-gold);
    border-color: var(--col-gold);
  }

  [data-col-btn='secondary']:hover {
    background: var(--col-gold);
    color: var(--col-black);
  }

  [data-col-btn='text'] {
    background: transparent;
    color: var(--col-gold);
    padding: 8px 0;
    border-bottom: 1px solid var(--col-gold);
    border-radius: 0;
  }

  [data-col-eyebrow] {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--col-gold);
    margin: 0 0 16px;
  }

  [data-col-input] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--col-light-gray);
    border-radius: 2px;
    background: var(--col-off-white);
    color: var(--col-black);
    font-family: var(--font-ui);
    font-size: 16px;
  }

  [data-col-input]::placeholder {
    color: var(--col-warm-gray);
  }

  [data-col-input] option {
    color: var(--col-black);
    background: var(--col-off-white);
  }

  [data-col-input]:focus {
    outline: 2px solid var(--col-gold);
    outline-offset: 0;
  }
}

@layer rmx-reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
  }

  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {
    margin: 0;
  }

  :where(img, svg) {
    display: block;
    max-width: 100%;
  }
}