/* ═══════════════════════════════════════════════════════════════════════════
   The Dinner Table · house theme (theme-house.css) — loaded AFTER theme.css,
   on every page except dt_theme=classic and the Muay Thai paths. This file is the
   token source of truth: cream paper, green ink, fridge-magnet red, raised
   tactile controls. Night (html.sky-night from ambience.js) switches to the
   house's dark green. Type: Lilita One titles (one weight, never bolded or
   squeezed), Barlow Condensed labels, Georgia card headings, system-ui body
   (matches the house shell and costs no download). Kalam is for handwritten notes only.
   Fonts are self-hosted from /static/fonts/.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: DTMagnet; src: url('/static/fonts/LilitaOne-Regular.woff2') format('woff2'), url('/static/fonts/LilitaOne-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: DTLabel; src: url('/static/fonts/BarlowCondensed-SemiBold.woff2') format('woff2'), url('/static/fonts/BarlowCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: DTLabel; src: url('/static/fonts/BarlowCondensed-Bold.woff2') format('woff2'), url('/static/fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: DTHand; src: url('/static/fonts/Kalam-Regular.woff2') format('woff2'), url('/static/fonts/Kalam-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }

:root {
  --bg:            #f3ecda;
  --bg-2:          #ebe2cc;
  --surface:       #fffbed;
  --surface-2:     #f7f0dd;
  --surface2:      var(--surface-2);   /* legacy name from style.css (was a dark fill) */
  --line: var(--border-strong); --card: var(--surface);   /* 5 Oct: aliases for pages that use these names (capsules, family_films, family_quiz*, memories, stories, wrapped) */
  --surface-solid: #fffbed;
  --border:        #dcd1b6;
  --border-strong: #c9bb98;
  --text:          #213934;
  --text-muted:    rgba(33,57,52,0.82);
  --text-faint:    rgba(33,57,52,0.74);
  --on-accent:     #fffbed;
  --accent:        #c82d32;
  --accent-deep:   #9e1f25;
  --accent-glow:   rgba(200,45,50,0.16);
  --gold:          #e0a91a;
  --sea:           #1972a3;
  --lav:           #7a5bb8;
  --mint:          #2f8a5f;
  --ink:           #213934;
  --paper-edge:    #cbbd9c;
  --font-display:  DTMagnet, 'Arial Black', sans-serif;
  --font-label:    DTLabel, 'Arial Narrow', Arial, sans-serif;
  --font-card:     Georgia, 'Iowan Old Style', serif;
  --font-hand:     DTHand, 'Segoe Print', cursive;
  --font-body:     system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --surface-ink:   #213934;   /* intentional dark stage blocks (game boards, hero panels): fill + text on it */
  --on-ink:        #f6efde;
  --gold-ink:      #7a5200;   /* gold / blue / orange that must read as TEXT on cream */
  --sea-ink:       #145a82;
  --warm-ink:      #8f4a12;
  --accent-ink:    #9e1f25;   /* accent as TEXT on tinted chips */
  --mint-ink:      #1a6a42;
  --rose-ink:      #a1262c;
  --orange-ink:    #8f4a12;
  --blue-ink:      #1a5a99;
  --violet-ink:    #5b34a0;
  --teal-ink:      #0f6b4f;
  --shadow-card:   0 4px 0 var(--paper-edge), 0 14px 28px -16px rgba(33,57,52,0.45);
  color-scheme: light;
}
html.sky-night {
  --bg:            #16211e;
  --bg-2:          #1b2825;
  --surface:       #213934;
  --surface-2:     #28433d;
  --surface-solid: #213934;
  --border:        rgba(246,239,222,0.14);
  --border-strong: rgba(246,239,222,0.24);
  --text:          #f6efde;
  --text-muted:    rgba(246,239,222,0.76);
  --text-faint:    rgba(246,239,222,0.72);
  --accent:        #ff8a7e;
  --lav:           #b8a4f2;
  --on-accent:     #16211e;
  --accent-deep:   #ec5a4e;
  --accent-glow:   rgba(255,107,94,0.2);
  --paper-edge:    #0f1816;
  --surface-ink:   #0f1816;
  --gold-ink:      #f2c14e;
  --sea-ink:       #7cc4ee;
  --warm-ink:      #f0a874;
  --accent-ink:    #ff8a7e;
  --mint-ink:      #86efac;
  --rose-ink:      #fca5a5;
  --orange-ink:    #f4a87c;
  --blue-ink:      #93c5fd;
  --violet-ink:    #c4b5fd;
  --teal-ink:      #6ee7b7;
  --shadow-card:   0 4px 0 #0f1816, 0 16px 30px -16px rgba(0,0,0,0.7);
  color-scheme: dark;
}

html, body { background: var(--bg); color: var(--text); }
body { background-image: radial-gradient(120% 80% at 50% -10%, var(--bg-2), var(--bg) 60%); }
#dt-aurora { display: none; }

/* Header: a paper shelf with magnet wordmark */
.site-header { background: var(--surface) !important; border-bottom: 1px solid var(--border-strong); box-shadow: 0 3px 0 var(--paper-edge); backdrop-filter: none; }
.site-header::after { display: none; }
.site-logo, html.sky-night .site-header .site-logo { font-family: var(--font-display); font-weight: 400; color: var(--accent); letter-spacing: 0.02em; text-transform: uppercase; background: none; -webkit-text-fill-color: currentColor; }
.site-footer, html.sky-night .site-footer { color: var(--text-faint); border-top: 1px solid var(--border); }

/* Type */
main h1, .board-header h1, .page-title { font-family: var(--font-display); font-weight: 400; color: var(--accent); letter-spacing: 0.01em; line-height: 1.12; }
main h2, main h3, .dt-card h2, .dt-card h3 { font-family: var(--font-card); font-weight: 700; color: var(--text); letter-spacing: 0; }
/* One heading voice (5 Oct audit): Lilita One ships one weight, so it is never fake-bolded or squeezed. */
html { font-synthesis-weight: none; }
.section-label, .board-header .section-label { font-family: var(--font-label); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--text-faint); }
.board-message .msg-text, .note, .sticky { font-family: var(--font-hand); }

/* Surfaces: paper cards with a pressed edge instead of glass */
.dt-glass, .dt-card { background: var(--surface) !important; border: 1px solid var(--border-strong) !important; box-shadow: var(--shadow-card) !important; backdrop-filter: none !important; }
.dt-card::before { display: none; }
.dt-spot::after { display: none; }

/* Buttons: raised, press down on tap */
.dt-btn, .post-btn, .btn, .cal-add-btn, .cal-btn-save, .apply-btn, .ext-btn, button[type="submit"]:not(.ai-send) {
  font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent); border: none; box-shadow: 0 4px 0 var(--accent-deep);
}
.dt-btn:hover, .post-btn:hover, .btn:hover { filter: none; box-shadow: 0 4px 0 var(--accent-deep); translate: 0 -1px; }
.dt-btn:active, .post-btn:active, .btn:active, button[type="submit"]:active { translate: 0 3px; box-shadow: 0 1px 0 var(--accent-deep); }

/* Ask button: same raised, tactile look as the other buttons, lavender token instead of the classic purple gradient */
.ai-trigger { background: var(--lav); color: var(--on-accent); font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 4px 0 rgba(33,57,52,0.35); }

/* Inputs on paper */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select {
  background: #fffdf5; color: var(--text); border: 1px solid var(--border-strong);
}
html.sky-night input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), html.sky-night textarea, html.sky-night select { background: #1b2825; }
:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* FullCalendar sets outline:0 on its buttons: give them the shared ring back */
.fc .fc-button:focus-visible, .fc .fc-button-primary:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 2px !important; box-shadow: none !important; }

/* Home hub tiles keep their colours but sit on the paper like magnets */
.hub-tile { box-shadow: 0 4px 0 rgba(33,57,52,0.35), 0 12px 22px -14px rgba(33,57,52,0.6); }
.hub-tile::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dt-btn:hover, .post-btn:hover, .btn:hover { translate: none; }
}

/* Page-level form styles (board, calendar) paint dark boxes; keep them on paper by day. */
html:not(.sky-night) body:not(:has(.mt-page)) textarea, html:not(.sky-night) body:not(:has(.mt-page)) select,
html:not(.sky-night) body:not(:has(.mt-page)) input[type="text"], html:not(.sky-night) body:not(:has(.mt-page)) input[type="search"], html:not(.sky-night) body:not(:has(.mt-page)) input[type="email"],
html:not(.sky-night) body:not(:has(.mt-page)) input[type="url"], html:not(.sky-night) body:not(:has(.mt-page)) input[type="number"], html:not(.sky-night) body:not(:has(.mt-page)) input[type="date"],
html:not(.sky-night) body:not(:has(.mt-page)) input[type="time"], html:not(.sky-night) body:not(:has(.mt-page)) input[type="password"], html:not(.sky-night) body:not(:has(.mt-page)) input:not([type]) {
  background: #fffdf5 !important; color: #213934 !important; border-color: #c9bb98 !important;
}

/* G1 QA fixes (25 Sep): readable accents and page-specific colours on paper */
html.sky-night .ctab.active, html.sky-night .sl-scope-btn.on { color: var(--on-accent) !important; }
html.sky-night .pl-who-btn, html.sky-night .pl-day.today .pl-day-head { color: #ffd0c9 !important; }
html:not(.sky-night) .sk-progress-pct { color: #8a5a00; }
html:not(.sky-night) .child-name { color: var(--text) !important; }
.fc { --fc-button-text-color: #213934; --fc-button-bg-color: #fffbed; --fc-button-border-color: #c9bb98;
       --fc-button-hover-bg-color: #f7f0dd; --fc-button-hover-border-color: #c9bb98;
       --fc-button-active-bg-color: #e6dcc4; --fc-button-active-border-color: #b3a47f; }
html:not(.sky-night) .fc .fc-daygrid-day.fc-day-today { background: rgba(200,45,50,0.10); }
html:not(.sky-night) .fc-day-today .fc-daygrid-day-number { color: #213934; font-weight: 800; }
html.sky-night .fc .fc-daygrid-day.fc-day-today { background: rgba(255,122,110,0.16); }
html.sky-night .fc-day-today .fc-daygrid-day-number { color: #fffbed; font-weight: 800; }