/* Page theme — warm paper, single-hue green.
   This governs CHROME only: menus, pairing, panels, boot screens, the tracker UI.
   Each game's WORLD (the canvas it draws) keeps its own palette and ignores this. */

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Nunito:wght@800;900&display=swap");

/* Light is the design; dark is the same paper at night — same green, same
   hierarchy, lower light. Declaring both schemes also tells browsers that force
   their own dark mode (TV browsers, Chrome's auto-dark) to leave the page alone —
   even when we choose light. */
:root, .force-light {
  color-scheme: light;

  --bg:          #f7f2e7;
  --bg-rgb:      247, 242, 231;
  --surface:     #fffcf4;
  --raised:      #eaf0dc;
  --border:      #dce2cd;
  --border-soft: #e1e5cf;

  --text:        #344f40;
  --heading:     #3d5c43;
  --muted:       #718564;
  --muted-2:     #82936e;
  --faint:       #90978a;

  --accent:        #58784d;
  --primary:       #5d7a50;
  --primary-hover: #4f6d44;
  --on-primary:    #fffbed;

  /* Attention without alarm: out of view, waiting, a wrong code. */
  --warn:        #c8912f;
  --warn-strong: #a8791f;
  --warn-text:   #8a6420;
  --warn-bg:     #faf0dc;
  --warn-border: #ecd6aa;
  --danger-text: #9d503b;
  --danger-bg:   #f7e3dc;

  --focus: #bf782f;

  /* Hard offset, zero blur — a pressable cue, not a drop shadow. */
  --press:  0 3px 0 rgba(69, 103, 62, .11);
  --card:   0 5px 20px rgba(90, 114, 56, .027);
}
:root { color-scheme: light dark; }

:root {
  --r-control: 12px;
  --r-card:    16px;
  --r-large:   24px;
  --font-display: Nunito, "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
}

/* Dark is chosen by lib/theme-mode.js: web stays light; TVs follow their own setting. */
:root[data-theme="dark"] {
  --bg:          #1b211d;
  --bg-rgb:      27, 33, 29;
  --surface:     #242c26;
  --raised:      #2e3a31;
  --border:      #3b4a3f;
  --border-soft: #334038;

  --text:        #e3e8da;
  --heading:     #eef0e2;
  --muted:       #a8b79c;
  --muted-2:     #9aac8c;
  --faint:       #869282;

  --accent:        #a9c89a;
  --primary:       #8db07c;
  --primary-hover: #9dbf8c;
  --on-primary:    #15200f;

  --warn:        #d9a441;
  --warn-strong: #e0b25a;
  --warn-text:   #e9c27a;
  --warn-bg:     #3a3120;
  --warn-border: #5e4d2c;
  --danger-text: #e79a84;
  --danger-bg:   #3d2923;

  --focus: #e0a256;

  --press:  0 3px 0 rgba(0, 0, 0, .28);
  --card:   0 5px 20px rgba(0, 0, 0, .18);
}

/* Anything drawn over a game world or the live camera sits on light artwork,
   so it keeps the paper look in either scheme. */
.force-light { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.95;   /* airy on purpose — the main reason this reads calm */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.027em;
  line-height: 1.25;
  margin: 0;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  box-shadow: var(--card);   /* almost invisible — the border does the work */
  padding: 23px 20px;
}

.btn {
  font: 500 14px/1 var(--font-body);
  padding: 14px 21px;
  border-radius: var(--r-control);
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--on-primary);
  box-shadow: var(--press);
  cursor: pointer;
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(69, 103, 62, 0); }

.btn-quiet {
  font: 500 14px/1 var(--font-body);
  padding: 13px 18px;
  border-radius: var(--r-control);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  cursor: pointer;
}
.btn-quiet:active { background: var(--raised); }

.btn-bare {
  font: 400 14px/1 var(--font-body);
  background: none; border: 0; padding: 0;
  color: var(--muted); cursor: pointer;
}

a { color: var(--accent); }
a:hover { color: var(--primary); }

hr { border: 0; border-top: 1px solid var(--border); margin: 0; }