/* ============================================================
   Guess the Painter — Design tokens (redesign-2026-05)
   Museum audio guide × mobile game.
   Warm cream paper, deep ink, ochre accent.
   Verdigris green and curtain red for correct/wrong feedback.

   Scope: variables on :root (global), reset only inside .gtp
   so the legacy stylesheet (styles.css) is untouched.
   ============================================================ */

:root {
  /* Surfaces */
  --paper:       #f5f0e6;   /* page background */
  --paper-2:     #ece5d6;   /* alt surface (sections, callouts) */

  /* Ink */
  --ink:         #1c1a17;   /* primary text, primary button */
  --ink-2:       #3a342c;   /* body text */
  --ink-3:       #6b6256;   /* secondary text */
  --ink-4:       #9c9384;   /* tertiary, disabled */

  /* Rules / dividers */
  --rule:        #d9cfbb;
  --rule-soft:   #e6dcc7;

  /* Accents */
  --ochre:       #b8893a;   /* primary accent */
  --ochre-deep:  #8a6422;   /* accent text on paper */
  --gold:        #d4ac5c;   /* highlight on dark surfaces */

  /* Feedback colors */
  --green:       #3f7a4f;
  --green-soft:  #c8dcc4;
  --green-flash: #4ea866;   /* CORRECT answer flash */
  --red:         #a8362a;   /* lives indicator */
  --red-soft:   #e9c8c0;
  --red-flash:   #c83a2c;   /* WRONG answer flash */

  /* Player colors (Duo mode) */
  --player-1:        #b8893a;
  --player-1-deep:   #8a6422;
  --player-1-tint:   rgba(184,137,58,0.12);
  --player-2:        #3a5d8f;
  --player-2-deep:   #26426b;
  --player-2-tint:   rgba(58,93,143,0.12);

  /* Duo mode — soft tinted backgrounds for active player band */
  --ochre:           #b8893a;    /* alias already declared above */
  --indigo:          #3a5d8f;    /* P2 accent */
  --indigo-deep:     #26426b;
  --ochre-bg-soft:   rgba(184,137,58,0.07);
  --indigo-bg-soft:  rgba(58,93,143,0.07);

  /* Elevation */
  --shadow-card: 0 1px 0 rgba(28,26,23,0.04), 0 8px 32px rgba(28,26,23,0.08);
  --shadow-deep: 0 24px 60px rgba(28,26,23,0.18), 0 4px 12px rgba(28,26,23,0.08);

  /* Typography stacks */
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ----- Local reset, scoped to .gtp so legacy styles are unaffected ----- */
.gtp,
.gtp *,
.gtp *::before,
.gtp *::after { box-sizing: border-box; }

.gtp {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gtp button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Screen-reader only utility — used to keep the SEO article body in the DOM
   without it visually competing with the new hero. */
.gtp .sr-only-keep-seo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----- Painting placeholder (prototype-only fallback) -----
   Real catalogue images key off painting.id; this stripe-frame placeholder
   is used by primitives/components when no image is provided. */
.gtp-painting {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      hsl(var(--ph-h, 30) var(--ph-s, 22%) calc(var(--ph-l, 30%) + 4%)) 0 14px,
      hsl(var(--ph-h, 30) var(--ph-s, 22%) calc(var(--ph-l, 30%) - 2%)) 14px 28px),
    hsl(var(--ph-h, 30) var(--ph-s, 22%) var(--ph-l, 30%));
  box-shadow: inset 0 0 0 6px rgba(0,0,0,0.15), inset 0 0 0 8px rgba(255,255,255,0.05);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
}
.gtp-painting::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}
.gtp-painting-plate {
  background: rgba(245,240,230,0.92);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 1px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  max-width: 90%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.gtp-painting-plate em    { font-style: italic; }
.gtp-painting-plate small {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  display: block;
  margin-top: 2px;
}

/* ----- Thin ochre rule (used between sections + below top bar) ----- */
.gtp-rule {
  border: 0;
  height: 1px;
  background: var(--ochre);
  opacity: 0.65;
  margin: 0;
}
.gtp-rule--soft { background: var(--rule); opacity: 1; }