/* ============================================================================
   GENESIS UI — the shared design-family kit (v1, 2026-08-12)
   Extracted from genesisdesktop.ca (see OWN-STACK/FAMILY-SYNC-SPEC + the
   design-family audit). One copy lives in EACH app folder and is synced BY
   COPY, exactly like system/platform.js — edit one, copy to the other(s):
     Genesis Parent V1/genesis-ui/genesis-ui.css
     Genesis Teacher V2.7/genesis-ui/genesis-ui.css
   Link fonts.css BEFORE this file. Then optionally override --gd-accent* :
     site = indigo (default here) · Parent = garden green · Teacher = indigo,
     purple reserved for admin identity.
   The dark-plum room (.gd-dark on body or a container) is for surfaces where
   power is held: Teacher admin sessions, sidebars, final CTAs.
   ========================================================================== */

:root {
  /* Grounds (the warm cream world) */
  --gd-ground: #FCFBF8;
  --gd-ground-alt: #FFFFFF;
  --gd-card: #FFFFFF;
  --gd-card-inverted: #FCFBF8;      /* cards invert the section ground */
  --gd-hairline: #ECE9E1;
  --gd-hairline-2: #E4E1D8;
  --gd-hairline-3: #DCD9CF;
  --gd-watermark: #F4F2EC;

  /* Inks — dark plum, never black */
  --gd-ink: #1B1826;
  --gd-ink-soft: #5D5A6B;
  --gd-ink-legal: #3E3A4A;

  /* Accent (per-app: override after this file) */
  --gd-accent: #5757D1;
  --gd-accent-hover: #4A4AC4;
  --gd-accent-glow: rgba(87, 87, 209, .32);
  --gd-gold: #EEC13E;

  /* The crayon rainbow — always all six, always this order */
  --gd-rb-1: #E8554D; --gd-rb-2: #F0883A; --gd-rb-3: #EEC13E;
  --gd-rb-4: #53AE63; --gd-rb-5: #4A8FE0; --gd-rb-6: #8A63D2;
  --gd-rainbow: linear-gradient(90deg, #E8554D, #F0883A, #EEC13E, #53AE63, #4A8FE0, #8A63D2);

  /* Semantics — identical in every room */
  --gd-ok: #53AE63;
  --gd-ok-deep: #2F6B3C;
  --gd-ok-wash: #F2F8F1;
  --gd-ok-line: #CFE5D2;
  --gd-warn: #B45309;
  --gd-warn-wash: #FDF6E3;
  --gd-warn-line: #EADFA9;
  --gd-warn-ink: #7A6410;
  --gd-danger: #C0392B;              /* light-legible danger (never #fca5a5 on white) */
  --gd-danger-solid: #C0392B;        /* danger BUTTON fills — deep solid in BOTH rooms (white label stays ≥4.5:1) */
  --gd-danger-wash: #FDF2F0;
  --gd-danger-line: #E8B4AE;
  --gd-admin: #8A63D2;               /* purple = admin identity, family-wide */
  --gd-admin-wash: #F1EAFB;

  /* Elevation */
  --gd-shadow-card: 0 18px 40px rgba(27, 24, 38, .09);
  --gd-shadow-pop: 0 24px 60px rgba(27, 24, 38, .13);
  --gd-shadow-btn: 0 12px 28px var(--gd-accent-glow);

  /* Radii */
  --gd-r-chip: 12px;
  --gd-r-card: 18px;
  --gd-r-big: 22px;
  --gd-r-pill: 999px;

  /* Type */
  --gd-font-display: 'Bricolage Grotesque', Charter, Georgia, serif;
  --gd-font-body: 'Nunito Sans', Nunito, 'Segoe UI', system-ui, sans-serif;
  /* House scale (px): micro 12 · label 12.5 · body-s 14.5 · body 15.5 ·
     lede 18.5 · h3 19-23 · h2 30-32 · h1 38-42. Bold-heavy: 700 default, 800 emphasis. */
}

/* ---- The dark-plum room (admin sessions, sidebars, power moments) -------- */
.gd-dark {
  --gd-ground: #17141F;
  --gd-ground-alt: #110F17;
  --gd-card: rgba(255, 255, 255, .05);
  --gd-card-inverted: rgba(255, 255, 255, .05);
  --gd-hairline: rgba(255, 255, 255, .11);
  --gd-hairline-2: rgba(255, 255, 255, .14);
  --gd-hairline-3: rgba(255, 255, 255, .22);
  --gd-watermark: rgba(255, 255, 255, .04);
  --gd-ink: #F5F3EE;                 /* warm off-white, never pure #fff */
  --gd-ink-soft: #B9B4C4;
  --gd-ink-legal: #B9B4C4;
  --gd-accent: #8B8BE8;              /* indigo lifted for dark contrast */
  --gd-accent-hover: #A5A5F0;
  --gd-accent-glow: rgba(139, 139, 232, .28);
  --gd-ok-wash: rgba(83, 174, 99, .14);
  --gd-ok-line: rgba(83, 174, 99, .35);
  --gd-ok: #7ED492;
  --gd-warn: #F0B429;
  --gd-warn-wash: rgba(240, 180, 41, .12);
  --gd-warn-line: rgba(240, 180, 41, .3);
  --gd-warn-ink: #EAD48A;
  --gd-danger: #F08A7E;
  --gd-danger-wash: rgba(232, 85, 77, .12);
  --gd-danger-line: rgba(232, 85, 77, .3);
  --gd-admin: #A98BE0;
  --gd-admin-wash: rgba(138, 99, 210, .16);
  --gd-shadow-card: 0 18px 40px rgba(0, 0, 0, .35);
  --gd-shadow-pop: 0 24px 60px rgba(0, 0, 0, .45);
  color: var(--gd-ink);
  background: var(--gd-ground);
}
.gd-dark .gd-eyebrow { color: var(--gd-gold); }   /* gold labels on dark, like the site */

/* ---- Primitives ---------------------------------------------------------- */

/* The family crest: 4px strip at the very top of every surface */
.gd-rainbow { height: 4px; background: var(--gd-rainbow); }
.gd-rainbow-thin { height: 3px; background: var(--gd-rainbow); }

/* Buttons: ALWAYS pills, bold, glowing primary */
.gd-btn, .gd-btn-quiet, .gd-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--gd-r-pill); border: none; cursor: pointer;
  font-family: var(--gd-font-body); font-weight: 800; font-size: 14.5px;
  padding: 12px 24px; line-height: 1; text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.gd-btn { background: var(--gd-accent); color: #fff; box-shadow: var(--gd-shadow-btn); }
.gd-btn:hover { background: var(--gd-accent-hover); transform: translateY(-2px); }
.gd-btn-quiet {
  background: var(--gd-ground-alt); color: var(--gd-ink);
  border: 1.5px solid var(--gd-hairline-3);
}
.gd-btn-quiet:hover { border-color: var(--gd-ink); }
.gd-btn-danger { background: var(--gd-danger-solid); color: #fff; }
.gd-btn[disabled], .gd-btn-quiet[disabled], .gd-btn-danger[disabled] {
  opacity: .55; cursor: default; transform: none; box-shadow: none;
}
.gd-btn-sm { padding: 8px 16px; font-size: 13px; }

/* Cards: hairline border, generous radius, optional tint strip */
.gd-card {
  background: var(--gd-card); border: 1px solid var(--gd-hairline);
  border-radius: var(--gd-r-card); padding: 20px 22px;
  position: relative; overflow: hidden;
}
.gd-card-hover { transition: transform .2s, box-shadow .2s; }
.gd-card-hover:hover { transform: translateY(-4px); box-shadow: var(--gd-shadow-card); }
.gd-card-strip::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gd-accent); opacity: .85;
}
.gd-card-strip-rainbow::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gd-rainbow);
}

/* Labels */
.gd-eyebrow {
  font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gd-accent);
}
.gd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gd-ground-alt); border: 1px solid var(--gd-hairline-2);
  border-radius: var(--gd-r-pill); padding: 6px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gd-ink-soft);
}

/* Callouts */
.gd-callout {
  border-radius: var(--gd-r-chip); padding: 13px 16px; font-size: 14.5px;
  background: var(--gd-ok-wash); border: 1px solid var(--gd-ok-line); color: var(--gd-ok-deep);
}
.gd-callout-warn { background: var(--gd-warn-wash); border-color: var(--gd-warn-line); color: var(--gd-warn-ink); }
.gd-callout-danger { background: var(--gd-danger-wash); border-color: var(--gd-danger-line); color: var(--gd-danger); }

/* Fields */
.gd-field {
  width: 100%; border: 1.5px solid var(--gd-hairline-2); border-radius: var(--gd-r-chip);
  background: var(--gd-ground-alt); color: var(--gd-ink);
  font-family: var(--gd-font-body); font-weight: 700; font-size: 15px;
  padding: 11px 14px;
}
.gd-field:focus { outline: none; border-color: var(--gd-accent); }
.gd-field::placeholder { color: var(--gd-ink-soft); opacity: .7; font-weight: 600; }

/* Modal system (replaces native alert/confirm/prompt) */
.gd-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(27, 24, 38, .45); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.gd-modal {
  background: var(--gd-ground); color: var(--gd-ink);
  border: 1px solid var(--gd-hairline); border-radius: var(--gd-r-big);
  box-shadow: var(--gd-shadow-pop); padding: 24px 26px;
  width: min(440px, 94vw); max-height: 86vh; overflow-y: auto;
}
.gd-modal-title {
  font-family: var(--gd-font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.01em; margin: 0 0 8px;
}
.gd-modal-body { font-size: 15px; color: var(--gd-ink-soft); font-weight: 600; line-height: 1.55; }
.gd-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* Toast */
.gd-toast {
  position: fixed; z-index: 1100; left: 50%; transform: translateX(-50%); top: 16px;
  background: var(--gd-ink); color: var(--gd-ground);
  border-radius: var(--gd-r-pill); padding: 11px 22px;
  font-weight: 800; font-size: 14.5px; box-shadow: var(--gd-shadow-pop);
  max-width: min(92vw, 560px);
}

/* Empty state */
.gd-empty {
  border: 1.5px dashed var(--gd-hairline-3); border-radius: var(--gd-r-card);
  padding: 26px 20px; text-align: center; color: var(--gd-ink-soft);
  font-weight: 700; font-size: 14.5px;
}

/* Keyboard focus — visible everywhere, family-wide.
   NO border-radius here: outlines follow the element's own radius, and setting
   one would square off pill buttons/fields (equal-specificity, later-wins). */
:focus-visible {
  outline: 2.5px solid var(--gd-accent);
  outline-offset: 2px;
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}