/**
 * styles.css — De Vitesse brand styling overrides on top of Tailwind CDN.
 *
 * Brand palette (from De Vitesse_Brand Guide.pdf):
 *   Primary:   Black #000000, White #FFFFFF
 *   Secondary: Dark Vanilla #D6C39D, Light Silver #D9D9D9
 *   Tertiary:  Free Speech Red #B20000
 *
 * Fonts:
 *   Headlines:      DM Serif Display (Regular)
 *   Subheadings:    Raleway (Bold)
 *   Body:           Raleway (Regular)
 */

:root {
  --dv-black: #000000;
  --dv-near-black: #0a0a0a;
  --dv-surface: #141414;
  --dv-surface-2: #1c1c1c;
  --dv-border: #2a2a2a;
  --dv-white: #ffffff;
  --dv-silver: #d9d9d9;
  --dv-silver-muted: #8a8a8a;
  --dv-vanilla: #d6c39d;
  --dv-vanilla-soft: rgba(214, 195, 157, 0.1);
  --dv-vanilla-border: rgba(214, 195, 157, 0.35);
  --dv-red: #b20000;
  --dv-red-soft: rgba(178, 0, 0, 0.12);
  --dv-red-border: rgba(178, 0, 0, 0.35);
  --dv-red-text: #e14a4a;
}

* {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, .dv-serif {
  font-family: 'DM Serif Display', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.dv-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

pre,
code,
#promptOutput {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

body {
  background: var(--dv-black);
  color: var(--dv-silver);
}

/* ── Brand color utility classes (used by JS-rendered content) ───────── */
.dv-bg-surface        { background-color: var(--dv-surface); }
.dv-bg-surface-2      { background-color: var(--dv-surface-2); }
.dv-border            { border-color: var(--dv-border); }
.dv-text-white        { color: var(--dv-white); }
.dv-text-silver       { color: var(--dv-silver); }
.dv-text-muted        { color: var(--dv-silver-muted); }
.dv-text-vanilla      { color: var(--dv-vanilla); }
.dv-text-red          { color: var(--dv-red-text); }
.dv-bg-vanilla        { background-color: var(--dv-vanilla); color: var(--dv-black); }
.dv-bg-vanilla-soft   { background-color: var(--dv-vanilla-soft); }
.dv-border-vanilla    { border-color: var(--dv-vanilla-border); }
.dv-bg-red-soft       { background-color: var(--dv-red-soft); }
.dv-border-red        { border-color: var(--dv-red-border); }

.dv-btn-primary {
  background-color: var(--dv-vanilla);
  color: var(--dv-black);
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.dv-btn-primary:hover:not(:disabled) {
  background-color: #e4d4b0;
}
.dv-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dv-btn-secondary {
  background-color: var(--dv-surface-2);
  color: var(--dv-white);
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.dv-btn-secondary:hover:not(:disabled) {
  background-color: #262626;
}

/* ── Prompt output block ─────────────────────────────────────────────── */
#promptOutput {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 500px;
  overflow-y: auto;
  background-color: var(--dv-near-black);
  color: var(--dv-silver);
}

#promptOutput::-webkit-scrollbar { width: 8px; height: 8px; }
#promptOutput::-webkit-scrollbar-track { background: transparent; }
#promptOutput::-webkit-scrollbar-thumb { background: var(--dv-border); border-radius: 4px; }
#promptOutput::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* ── Form inputs — vanilla accent on focus ───────────────────────────── */
input, textarea, select {
  background-color: var(--dv-surface);
  border-color: var(--dv-border);
  color: var(--dv-white);
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--dv-vanilla) !important;
  box-shadow: 0 0 0 1px var(--dv-vanilla-border) !important;
}

/* ── Details/summary arrow ───────────────────────────────────────────── */
details > summary::-webkit-details-marker,
details > summary::marker {
  display: none;
}

/* ── Pulse animation for loading dots ────────────────────────────────── */
@keyframes soft-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.animate-pulse {
  animation: soft-pulse 1.4s ease-in-out infinite;
}

/* ── Racing flag mark ────────────────────────────────────────────────── */
.dv-flags {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: var(--dv-vanilla);
  -webkit-mask-image: url('/flags.png');
  mask-image: url('/flags.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}