/* =====================================================================
   MOM LIFE TEXAS - THEME
   ---------------------------------------------------------------------
   Load this AFTER each page's own <style> block. It wins on source
   order, so it retunes the existing pages without rewriting them.

   Each page carries data-theme="app" or data-theme="public" on <body>.
   The two sets use the same variable names for opposite jobs, which is
   why the mapping is scoped rather than global.

   PEARL BLUSH, the single source of colour for the whole system.
     Pearl        #F5F3EF
     Ivory        #FCF9F5   the ground
     Dusty Blush  #CBA8A8
     Warm Grey    #8F9093
   Everything marked deepened is a darker version of one of those four,
   because the published palette ships nothing dark enough to read as
   text or to sit under white.

   CHANGE COLOUR HERE AND NOWHERE ELSE. index.html still carries its own
   :root, which is fine, because the values below are identical. If you
   edit one, edit both, or this file silently wins and you spend an hour
   wondering why.

   The material layer, grain, brushed metal, layered shadows, lives in
   index.html only. It is a public-site treatment and the admin does not
   want it, since a data tool should be flat and quiet.
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --t-ivory:     #FCF9F5;   /* page ground */
  --t-pearl:     #F5F3EF;
  --t-paper:     #F3ECE7;   /* secondary bands */
  --t-band:      #F7F2EE;   /* header, hero, footer */
  --t-porcelain: #FFFFFF;   /* raised surfaces */

  --t-ink:       #333437;   /* Warm Grey deepened, 11.9:1 */
  --t-ink-mid:   #424347;   /* dark blocks */
  --t-ink-soft:  #666A6E;   /* secondary text, 5.2:1 */

  --t-blush:     #CBA8A8;   /* the published Dusty Blush */
  --t-action:    #A0525E;   /* Dusty Blush deepened, 5.4:1, the one colour that means act */
  --t-action-dk: #8A4550;   /* hover, error */
  --t-blush-pale:#F4ECEF;   /* soft accent background */

  --t-nacre:     #DCD2DE;   /* dividers, callout borders */
  --t-nacre-dk:  #9A8EA0;   /* numerals, rules */
  --t-rose-grey: #7C6360;   /* badges, held status, 5.5:1 */

  --t-line:      #E6DEDA;   /* hairline */
  --t-good:      #5E8570;
  --t-wait:      #9A7340;

  --t-display: 'Fraunces', Georgia, serif;
  --t-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- admin, dashboard, agreement, report, profile, schedule ----- */
body[data-theme="app"] {
  --cream: var(--t-ivory);
  --plum: var(--t-ink);
  --espresso: var(--t-ink);
  --espresso-dk: var(--t-ink);
  --blush: var(--t-blush-pale);
  --lav: var(--t-paper);
  --navy: var(--t-ink);
  --ink: var(--t-ink);
  --rose: var(--t-action);
  --rose-dk: var(--t-action-dk);
  --line: var(--t-line);
  --soft: var(--t-ink-soft);
  --white: var(--t-porcelain);
  --open: var(--t-good);
  --ok: var(--t-good);
  --pending: var(--t-wait);
  --taken: var(--t-action);
  --sand: var(--t-paper);
  --terra: var(--t-action);
  --terra-dk: var(--t-action-dk);
  --sage: var(--t-blush-pale);
  --sage-dk: var(--t-nacre-dk);
}

/* ---------- the public site ------------------------------------------- */
/* Matches index.html's own :root exactly. Kept here so colour lives in
   one file even though index.html can stand alone without it. */
body[data-theme="public"] {
  --espresso: var(--t-ink);
  --espresso-dk: var(--t-band);     /* a LIGHT band on index, not dark */
  --dark: var(--t-ink-mid);
  --cream: var(--t-ivory);
  --sand: var(--t-paper);
  --terra: var(--t-action);
  --terra-lt: var(--t-nacre-dk);
  --terra-dk: var(--t-action-dk);
  --spot: var(--t-action);
  --lav: var(--t-blush-pale);
  --sage: var(--t-blush);
  --sage-dk: var(--t-rose-grey);
  --tan: var(--t-nacre);
  --ink: var(--t-ink);
  --soft: var(--t-ink-soft);
  --line: var(--t-line);
  --white: var(--t-porcelain);
  --warn: var(--t-rose-grey);
  --pink: var(--t-blush);
}

/* ---------- typography -------------------------------------------------- */
body { font-family: var(--t-ui); color: var(--t-ink); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4,
.hero h1, .head h1, .brand {
  font-family: var(--t-display);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.18;
}
.hero h1, .head h1 { font-weight: 400; letter-spacing: -0.025em; }
.head .brand, .brand { text-transform: none; letter-spacing: -0.01em; }

p, li, td, th, label, input, select, textarea, button { font-family: var(--t-ui); }

/* ---------- surfaces, admin side only ----------------------------------- */
/* index.html has its own shadow scale and material treatment. Everything
   below is scoped to the app pages so it cannot flatten the public site. */
body[data-theme="app"] .card,
body[data-theme="app"] table,
body[data-theme="app"] .lead {
  border-radius: 14px;
  border: 1px solid var(--t-line);
  box-shadow: none;
}
/* One shadow, on the page's primary card, so it signals hierarchy rather
   than decorating every box equally. */
body[data-theme="app"] .card:first-of-type {
  box-shadow: 0 1px 2px rgba(51,52,55,.04), 0 8px 24px rgba(51,52,55,.05);
}

body[data-theme="app"] .hero,
body[data-theme="app"] .head { background: var(--t-ink); }
body[data-theme="app"] .hero h1,
body[data-theme="app"] .head h1 { color: var(--t-porcelain); }
body[data-theme="app"] .hero .soft,
body[data-theme="app"] .head p,
body[data-theme="app"] .hero [style*="E9D9D2"] { color: #C8C4C0 !important; }

/* ---------- controls ----------------------------------------------------- */
.btn, .lib-btn, button.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background .14s ease, border-color .14s ease;
}
/* index.html's buttons carry the brushed metal treatment. Leave them be. */
body[data-theme="app"] .btn.ghost,
.lib-btn.ghost {
  border-color: var(--t-line);
  color: var(--t-ink);
}
body[data-theme="app"] input,
body[data-theme="app"] select,
body[data-theme="app"] textarea {
  border-radius: 10px;
  border-color: var(--t-line);
  background: var(--t-porcelain);
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--t-nacre-dk);
  outline-offset: 2px;
  border-color: var(--t-nacre-dk);
}

/* Pills are the one place a full round is right, because they are labels
   rather than surfaces. */
.pill, .lib-tag { border-radius: 999px; font-weight: 600; letter-spacing: 0; }

/* ---------- restraint ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
