/* ═══════════════════════════════════════════
   BASE.CSS — design tokens, fonts, CSS reset
   Shared by all modules. Never import colors
   anywhere else — always use var(--token).
═══════════════════════════════════════════ */


/* ── 1. FONT IMPORTS ── */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=DM+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Bebas+Neue&family=Special+Elite&display=swap');


/* ── 2. DESIGN TOKENS ── */

:root {

  /* Surfaces */
  --bg:          #0d0d0f;
  --surface:     #141418;
  --surface2:    #1c1c22;
  --surface3:    #28282f;
  --surface-alt: var(--surface);
  --bg2:         var(--surface2);

  /* Borders */
  --border: #2a2a33;

  /* Text */
  --text:      #e8e6e0;
  --text2:     var(--text);
  --text-game: #f0ede4;
  --text-dim:  #888888;
  --muted:     #7a7870;

  /* Accent (gold) */
  --accent:       #c9a84c;
  --accent-light: #e8c96a;
  --accent-dim:   rgba(201, 168, 76, 0.07);
  --accent-mid:   rgba(201, 168, 76, 0.13);
  /* Accent aliases (short forms used in shell CSS) */
  --acc:          var(--accent);
  --acc2:         var(--accent-light);
  --acc-glow:     rgba(201, 168, 76, 0.30);
  --acc-dim:      var(--accent-dim);

  /* Semantic colors */
  --danger:       #e05252;
  --danger-dark:  #5a2020;
  --danger-light: #c97070;
  --danger-bg:    #1a0a0a;
  --green:        #52c77a;
  --green-dark:   #1a3a1a;
  --green-light:  #86efac;
  --amber:        #f59e0b;
  --sky:          #38bdf8;
  --warning-border: #5a3010;

  /* Gender */
  --gender-male:    #4fa3e0;
  --gender-female:  #e07aa3;
  --gender-other:   #9b7ae0;

  /* Extended palette (editor) */
  --purple:       #7c3aed;
  --purple-light: #a78bfa;
  --blue:         #60a5fa;

  /* Game accent (green) */
  --game-accent:      #3ec87a;
  --game-accent-light:#5fe090;
  --game-accent-glow: rgba(62, 200, 122, 0.30);
  --game-accent-dim:  rgba(62, 200, 122, 0.08);

  /* Fonts */
  --font-mono:    "DM Mono", monospace;
  --font-sans:    "DM Sans", sans-serif;
  --font-serif:   "Playfair Display", serif;
  --font-display: "Bebas Neue", sans-serif;
  --font-retro:   "Special Elite", cursive;

  /* Breakpoints (use in JS as getComputedStyle reference, or in media queries) */
  --bp-sm: 420px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* ── Welcome / Hub ── */
  --welcome-bg:       #0a0a0c;
  --welcome-glow-1:   rgba(201, 168, 76, 0.12);
  --welcome-glow-2:   rgba(232, 201, 106, 0.08);
  --welcome-glow-3:   rgba(180, 145, 55, 0.06);
  --welcome-btn-bg:   rgba(201, 168, 76, 0.10);
  --welcome-btn-border: rgba(201, 168, 76, 0.25);
  --welcome-btn-hover:  rgba(201, 168, 76, 0.18);

  /* ── Settings Sidebar ── */
  --sidebar-width:    220px;
  --sidebar-bg:       #111115;
  --sidebar-active:   rgba(201, 168, 76, 0.12);
  --sidebar-hover:    rgba(201, 168, 76, 0.06);
  --sidebar-border:   var(--border);

  /* ── Session Card (Game) ── */
  --session-card-bg:      rgba(20, 20, 24, 0.92);
  --session-card-border:  rgba(201, 168, 76, 0.18);
  --session-card-shadow:  0 8px 32px rgba(0, 0, 0, 0.5);
  --session-card-width:   420px;

  /* ── Focus ring ── */
  --focus-ring: 2px solid var(--accent);
}


/* ── 3. CSS RESET ── */

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

html {
  scroll-behavior: smooth;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}


/* ── 4. BASE TYPOGRAPHY & BODY ── */

body {
  background:   var(--bg);
  color:        var(--text);
  font-family:  var(--font-mono);
  font-size:    13px;
  line-height:  1.6;
  min-height:   100vh;
  overflow-x:   hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ── 5. SHARED MODAL SYSTEM ── */

.modal-bg {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.75);
  z-index:         200;
  align-items:     center;
  justify-content: center;
}
.modal-bg.open { display: flex; }

.modal-box {
  background:  var(--surface);
  border:      1px solid var(--border);
  border-radius: 8px;
  padding:     20px;
  width:       90%;
  max-width:   680px;
  max-height:  92vh;
  overflow-y:  auto;
}
.modal-box h3 {
  font-family:   var(--font-serif);
  color:         var(--accent);
  margin-bottom: 12px;
}

/* Flex variant — fixed header/footer, scrollable body */
.modal-box--flex {
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}
.modal-box--flex > * { flex-shrink: 0; }
.modal-box--flex .modal-scroll {
  flex:       1;
  overflow-y: auto;
  min-height: 0;
}

.modal-actions {
  display:     flex;
  gap:         8px;
  margin-top:  12px;
  flex-wrap:   wrap;
  align-items: center;
}

/* Shared form elements used inside modals */
.modal-label {
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--muted);
  display:        block;
  margin-bottom:  4px;
}
.modal-input {
  width:         100%;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     12px;
  padding:       6px 9px;
  outline:       none;
  margin-bottom: 9px;
}
.modal-input:focus    { border-color: var(--accent); }
.modal-textarea {
  width:         100%;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     12px;
  padding:       6px 9px;
  outline:       none;
  resize:        vertical;
  min-height:    65px;
  margin-bottom: 9px;
}
.modal-textarea:focus { border-color: var(--accent); }
.modal-select {
  width:         100%;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     12px;
  padding:       6px 9px;
  outline:       none;
  margin-bottom: 9px;
}
.modal-select:focus   { border-color: var(--accent); }

.confirm-p {
  color:       var(--text);
  margin-bottom: 16px;
  line-height:   1.8;
  text-align:    center;
}
.confirm-p strong { color: var(--danger); }


/* ── 6. SHARED TOAST SYSTEM ── */

.toast {
  position:        fixed;
  bottom:          20px;
  right:           20px;
  background:      var(--surface);
  border:          1px solid var(--accent);
  border-radius:   5px;
  padding:         8px 14px;
  font-size:       12px;
  color:           var(--accent);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.3s;
  z-index:         300;
  max-width:       320px;
}
.toast.show         { opacity: 1; }
.toast--error       { border-color: var(--danger);  color: var(--danger); }
.toast--success     { border-color: var(--green);   color: var(--green);  }
.toast--info        { border-color: var(--blue);    color: var(--blue);   }


/* ── 7. FOCUS MANAGEMENT ── */

/* Keyboard/programmatic focus: visible ring for accessibility */
:focus-visible {
  outline:        var(--focus-ring);
  outline-offset: 2px;
  border-radius:  2px;
}

/* Inputs use border-color as focus indicator — suppress the outline ring */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}


/* ── Staging environment banner ── */
body[data-env="staging"]::before {
  content: 'STAGING \2014 data may be wiped at any time';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: auto;
  z-index: 99999;
  background: #7c3500;
  color: #fff;
  font-size: 0.72rem;
  font-family: system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.35rem 1rem;
  pointer-events: none;
}