/*
 * EverWord web brand (Ticket 72): the refined v3 style for the website and the Operations Console.
 * Values come from the v3 palette in tokens.yaml; the native app does not import this file.
 *
 * Owner-locked rules (2026-10-24): Alexandria for interface and headlines, Newsreader for German;
 * controls take the colour of their learning area (cobalt where there is none, slate for the
 * Assistant, never pure black); "block" controls have a 2px edge and a solid offset in a deeper
 * shade that presses in; cards are flat; navigation stays calm.
 *
 * Fonts are loaded by each app (`@fontsource-variable/alexandria`, Newsreader); this file only
 * names them.
 */
:root {
  --ew-font: "Alexandria Variable", "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ew-font-german: "Newsreader Variable", "Newsreader", Georgia, "Times New Roman", serif;

  /* Learning areas: fill, deep edge/text, tint, text on the fill */
  --ew-voc: #2d5bff; --ew-voc-deep: #1b3fc4; --ew-voc-tint: #e7ecff; --ew-voc-on: #ffffff;
  --ew-gram: #00999a; --ew-gram-deep: #006b6c; --ew-gram-tint: #ddf3f3; --ew-gram-on: #ffffff;
  --ew-lis: #ff2e63; --ew-lis-deep: #b81c44; --ew-lis-tint: #ffe6ec; --ew-lis-on: #ffffff;
  --ew-exam: #ffc400; --ew-exam-deep: #a67e00; --ew-exam-tint: #fff4cc; --ew-exam-on: #2a1e00;
  --ew-slate: #4e576b; --ew-slate-deep: #2f3544; --ew-slate-tint: #eceef2; --ew-slate-on: #ffffff;
  --ew-gold: #f2b705;

  /* Neutrals (light) */
  --ew-page: #f8f8fa; --ew-surface: #ffffff; --ew-soft: #f1f2f5; --ew-line: #e6e7ec; --ew-edge: #d9dbe3;
  --ew-text: #0e1016; --ew-text-2: #3f4350; --ew-muted: #6e717c;
  --ew-ok: #157c3b; --ew-ok-tint: #e3f6ea; --ew-bad: #c92f26; --ew-bad-tint: #ffe5e3;
  --ew-warn: #9c5b00; --ew-warn-tint: #fff1dc;

  /* The current control colour: cobalt unless an area class changes it */
  --ew-c: var(--ew-voc); --ew-d: var(--ew-voc-deep); --ew-t: var(--ew-voc-tint); --ew-on: var(--ew-voc-on);

  --ew-radius-control: 14px; --ew-radius-card: 24px;
  --ew-press: transform 0.14s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.14s ease;
}

[data-theme="dark"] {
  --ew-page: #000000; --ew-surface: #1c1c1e; --ew-soft: #2c2c2e; --ew-line: #38383a; --ew-edge: #3a3a3e;
  --ew-text: #ffffff; --ew-text-2: #ebebf5; --ew-muted: #98989d;
  --ew-voc-tint: #16204f; --ew-gram-tint: #0a2b2c; --ew-lis-tint: #3d0e1e; --ew-exam-tint: #3a2d00; --ew-slate-tint: #262a33;
  --ew-ok: #30d158; --ew-ok-tint: #0f2e1c; --ew-bad: #ff453a; --ew-bad-tint: #3d1512; --ew-warn: #ff9f0a; --ew-warn-tint: #33260b;
}

.ew-area-voc { --ew-c: var(--ew-voc); --ew-d: var(--ew-voc-deep); --ew-t: var(--ew-voc-tint); --ew-on: var(--ew-voc-on); }
.ew-area-gram { --ew-c: var(--ew-gram); --ew-d: var(--ew-gram-deep); --ew-t: var(--ew-gram-tint); --ew-on: var(--ew-gram-on); }
.ew-area-lis { --ew-c: var(--ew-lis); --ew-d: var(--ew-lis-deep); --ew-t: var(--ew-lis-tint); --ew-on: var(--ew-lis-on); }
.ew-area-exam { --ew-c: var(--ew-exam); --ew-d: var(--ew-exam-deep); --ew-t: var(--ew-exam-tint); --ew-on: var(--ew-exam-on); }
.ew-area-slate { --ew-c: var(--ew-slate); --ew-d: var(--ew-slate-deep); --ew-t: var(--ew-slate-tint); --ew-on: var(--ew-slate-on); }

/* Block button: primary fill, or `.is-secondary` tint; presses into its offset */
.ew-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--ew-radius-control);
  font: 600 16px/1.2 var(--ew-font); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  background: var(--ew-c); color: var(--ew-on);
  border: 2px solid var(--ew-d); box-shadow: 4px 4px 0 0 var(--ew-d);
  transition: var(--ew-press);
}
.ew-btn.is-secondary { background: var(--ew-t); color: var(--ew-d); }
.ew-btn.is-small { min-height: 40px; padding: 0 16px; font-size: 14.5px; box-shadow: 3px 3px 0 0 var(--ew-d); }
.ew-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 transparent; }
.ew-btn:focus-visible { outline: 3px solid var(--ew-c); outline-offset: 3px; }
.ew-btn[disabled], .ew-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
[data-theme="dark"] .ew-btn.is-secondary { color: #fff; }

/* Flat card: no shadow */
.ew-card { background: var(--ew-surface); border-radius: var(--ew-radius-card); }

/* EverWord duotone icon: rounded 2pt strokes, closed shapes get an 18% fill (class "f") */
.ew-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ew-icon .f { fill: currentColor; fill-opacity: 0.18; }