/* WeBook brand tokens: the one place colors, type, shape and depth are defined.
   Every page loads this first. See /brand and BRAND.md for how to use them. */
:root {
  /* Brand */
  --lime: #a3e635;        /* primary actions, highlights, the logo mark */
  --lime-light: #d9f99d;  /* hover fills, chips, soft highlights */
  --lime-dark: #65a30d;   /* focus rings, success accents on light backgrounds */

  /* Ink and surfaces */
  --black: #0f172a;       /* main text ("navy ink") */
  --border: #1e293b;      /* borders and the offset shadow */
  --muted: #64748b;       /* secondary text */
  --muted-light: #f1f5f9; /* quiet fills, disabled states */
  --bg: #fafaf7;          /* page background, under the dot grid */
  --card: #ffffff;        /* cards and panels */
  --white: #ffffff;
  --dot: #d1d5db;         /* dot grid */

  /* Feedback */
  --error: #ef4444;
  --red: #ef4444;
  --success: #16a34a;

  /* Type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* Shape and depth: thick borders with a hard offset shadow are the WeBook look */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --border-width: 2.5px;
  --shadow-sm: 2px 2px 0 var(--border);
  --shadow: 3px 3px 0 var(--border);
  --shadow-lg: 5px 5px 0 var(--border);
}

/* Visible keyboard focus everywhere, in the brand's dark lime */
:focus-visible {
  outline: 2px solid var(--lime-dark);
  outline-offset: 2px;
}