/* Demain Global brand tokens & typography */

/* Serif: Cormorant Garamond */
@font-face {
  font-family: 'Demain Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_v86GnM.ttf') format('truetype');
}
@font-face {
  font-family: 'Demain Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_s06GnM.ttf') format('truetype');
}
@font-face {
  font-family: 'Demain Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_iE9GnM.ttf') format('truetype');
}
@font-face {
  font-family: 'Demain Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cormorant/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_hg9GnM.ttf') format('truetype');
}

/* Sans: Epilogue (Futura-inspired geometric) */
@font-face {
  font-family: 'Demain Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/epilogue/O4ZMFGj5hxF0EhjimngomvnCCtqb30OXMDPiDA.ttf') format('truetype');
}
@font-face {
  font-family: 'Demain Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/epilogue/O4ZMFGj5hxF0EhjimngomvnCCtqb30OXAjPiDA.ttf') format('truetype');
}
@font-face {
  font-family: 'Demain Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/epilogue/O4ZMFGj5hxF0EhjimngomvnCCtqb30OX7jTiDA.ttf') format('truetype');
}
@font-face {
  font-family: 'Demain Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/epilogue/O4ZMFGj5hxF0EhjimngomvnCCtqb30OX1zTiDA.ttf') format('truetype');
}

:root {
  /* Core palette: deep navy vaults + gold signal accents */
  --bg: #05070d;
  --bg-soft: #0b1221;
  --surface-dark: #0f172a;
  --surface-dark-soft: #111b31;
  --surface-highlight: #1a2440;
  --grid-line: rgba(255, 255, 255, 0.06);
  --grid-strong: rgba(255, 255, 255, 0.12);
  --accent-gold: #d8b46a;
  --accent-gold-soft: #f2dcb0;
  --accent-cyan: #7bd8ff;
  --brand-red: #ed2327; /* keep logo accent available */
  --text: #e6edf7;
  --text-strong: #f9fbff;
  --text-on-dark: #e8edf8;
  --muted: #a4b0c6;
  --muted-on-dark: #b7c4dd;
  --border-soft: rgba(255, 255, 255, 0.14);
  --border-on-dark: rgba(255, 255, 255, 0.24);
  --shadow-ambient: 0 18px 70px rgba(2, 5, 12, 0.55);
  --shadow-focus: 0 0 0 1px rgba(216, 180, 106, 0.35), 0 0 26px rgba(216, 180, 106, 0.2);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --font-serif: 'Demain Serif', 'Cormorant Garamond', 'Garamond', serif;
  --font-sans: 'Demain Sans', 'Epilogue', 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', 'JetBrains Mono', 'DM Mono', monospace;
  /* Legacy tokens consumed by templates */
  --color-primary: var(--text);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent-gold);
  --color-background: var(--bg);
  --color-secondary: var(--bg-soft);
  --max-width: 1280px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f8f6f3;
    --bg-soft: #f0ebe3;
    /* Keep \"dark\" panels truly dark even in light mode for contrast sections */
    --surface-dark: #0f172a;
    --surface-dark-soft: #111b31;
    --surface-highlight: #16223d;
    --text: #151722;
    --text-strong: #0f1119;
    --text-on-dark: #f5f7fb;
    --muted: #4b5563;
    --muted-on-dark: #d0d6e4;
    --border-soft: rgba(0, 0, 0, 0.14);
    --border-on-dark: rgba(255, 255, 255, 0.22);
    color-scheme: light;
  }
}

:root[data-theme="dark"] {
  --bg: #05070d;
  --bg-soft: #0b1221;
  --surface-dark: #0f172a;
  --surface-dark-soft: #111b31;
  --surface-highlight: #1a2440;
  --grid-line: rgba(255, 255, 255, 0.06);
  --grid-strong: rgba(255, 255, 255, 0.12);
  --accent-gold: #d8b46a;
  --accent-gold-soft: #f2dcb0;
  --accent-cyan: #7bd8ff;
  --brand-red: #ed2327;
  --text: #e6edf7;
  --text-strong: #f9fbff;
  --text-on-dark: #e8edf8;
  --muted: #a4b0c6;
  --muted-on-dark: #b7c4dd;
  --border-soft: rgba(255, 255, 255, 0.14);
  --border-on-dark: rgba(255, 255, 255, 0.24);
  --color-primary: var(--text);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent-gold);
  --color-background: var(--bg);
  --color-secondary: var(--bg-soft);
  --max-width: 1280px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f8f6f3;
  --bg-soft: #f0ebe3;
  --surface-dark: #0f172a;
  --surface-dark-soft: #111b31;
  --surface-highlight: #16223d;
  --text: #151722;
  --text-strong: #0f1119;
  --text-on-dark: #f5f7fb;
  --muted: #4b5563;
  --muted-on-dark: #d0d6e4;
  --border-soft: rgba(0, 0, 0, 0.14);
  --border-on-dark: rgba(255, 255, 255, 0.22);
  --color-primary: var(--text);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent-gold);
  --color-background: var(--bg);
  --color-secondary: var(--bg-soft);
  --max-width: 1280px;
  color-scheme: light;
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

a {
  color: color-mix(in srgb, var(--accent-gold) 72%, var(--text) 28%);
  text-decoration-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
}

a:hover,
a:focus-visible {
  text-decoration-color: var(--accent-gold);
}

:focus-visible {
  outline: 3px solid var(--accent-gold);
  outline-offset: 3px;
}

.smallcaps {
  letter-spacing: 0.2em;
  font-weight: 400;
  text-transform: uppercase;
}

.brand-logo img {
  height: auto;
  max-width: min(52vw, 260px);
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.35));
}