/* =============================================================================
   styles.css  —  WordCraft shared base (design tokens + reset + shell)
   -----------------------------------------------------------------------------
   Fonts are SYSTEM stacks on purpose: no Google Fonts dependency, so the
   platform renders correctly on school networks that block Google domains.
   The Cambridge serif look comes from Palatino/Georgia, already on most devices.
   Later stages style their components using only the variables defined here.
   ========================================================================== */

:root {
  /* Palette — parchment / deep navy / muted gold / soft emerald */
  --cream:      #f7f2e7;
  --paper:      #fffdf8;
  --card:       #ffffff;
  --navy:       #0a2540;
  --navy-soft:  #163a60;
  --ink:        #1d2b38;
  --ink-soft:   #5d6b78;
  --gold:       #c4a052;
  --gold-soft:  #e6d6a6;
  --emerald:    #1f6f57;
  --emerald-soft:#dcebe3;
  --line:       #e7dcc7;
  --danger:     #a4423a;
  --ok:         #1f6f57;
  --warn:       #b4862b;

  /* Typography */
  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-ar: "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;

  /* Shape + depth */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(10,37,64,.06);
  --shadow-md: 0 4px 18px rgba(10,37,64,.08);
  --shadow-lg: 0 12px 40px rgba(10,37,64,.12);
  --maxw: 1180px;
}

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

html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #fffaf0 0%, transparent 60%),
    var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); line-height: 1.2; font-weight: 600; }

button, input, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; }
button { cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 4px; }

a { color: var(--emerald); }

/* --- Reusable primitives later stages can use ------------------------------ */
.wc-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px;
}
.wc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-md); font-weight: 600; font-size: .92rem;
  background: var(--navy); color: #fff; transition: transform .12s ease, box-shadow .12s ease, background .2s;
}
.wc-btn:hover { background: var(--navy-soft); box-shadow: var(--shadow-md); }
.wc-btn--ghost:hover { background: var(--cream); color: var(--navy); border-color: var(--gold-soft); }
.wc-btn--gold:hover { background: var(--gold); color: var(--navy); filter: brightness(.96); }
.wc-btn:active { transform: translateY(1px); }
.wc-btn--gold { background: var(--gold); color: var(--navy); }
.wc-btn--ghost { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.wc-input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--paper); transition: border-color .15s;
}
.wc-input:focus { border-color: var(--emerald); }
.wc-label { display: block; font-size: .76rem; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.wc-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); }

/* --- Boot / loading shell -------------------------------------------------- */
.wc-boot {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px;
}
.wc-boot__mark {
  font-family: var(--font-display); font-size: 2rem; color: var(--navy);
  letter-spacing: .01em;
}
.wc-boot__mark b { color: var(--gold); font-weight: 600; }
.wc-boot__sub { color: var(--ink-soft); font-size: .9rem; max-width: 30ch; }
.wc-spinner {
  width: 26px; height: 26px; border: 3px solid var(--gold-soft);
  border-top-color: var(--gold); border-radius: 50%; animation: wc-spin .7s linear infinite;
}
@keyframes wc-spin { to { transform: rotate(360deg); } }

/* --- Sync status pill (used by the workspace later) ------------------------ */
.wc-sync { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.wc-sync__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); }
.wc-sync--local .wc-sync__dot { background: var(--warn); }
.wc-sync--synced .wc-sync__dot { background: var(--ok); }
.wc-sync--failed .wc-sync__dot { background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}