/* ============================================================
   MathMentor — Color tokens
   Notion-style: warm paper canvas, near-black ink, one blue.
   ============================================================ */

:root {
  /* ---- Brand & structural accent (the ONLY action color) ---- */
  --primary: #0075de;          /* Notion Blue — CTA fill, links, focus */
  --primary-active: #005bab;   /* pressed primary */
  --on-primary: #ffffff;
  --secondary: #213183;        /* Deep indigo — single dark hero band */
  --on-secondary: #ffffff;

  /* ---- Decorative sticker palette (illustrations ONLY) ---- */
  --accent-sky: #62aef0;
  --accent-purple: #d6b6f6;
  --accent-purple-deep: #391c57;
  --accent-pink: #ff64c8;
  --accent-orange: #dd5b00;
  --accent-orange-deep: #793400;
  --accent-teal: #2a9d99;
  --accent-green: #1aae39;
  --accent-brown: #523410;

  /* ---- Surface ---- */
  --canvas: #ffffff;           /* card / panel / nav / field surfaces */
  --surface: #ffffff;
  --canvas-soft: #f6f5f4;      /* signature warm page canvas + footer */
  --hairline: #e6e6e6;         /* 1px borders & dividers */
  --field-border: #dddddd;     /* text-input border (rgb 221,221,221) */

  /* ---- Text ---- */
  --ink: #000000;              /* primary headings/body (~95% alpha in use) */
  --ink-95: rgba(0, 0, 0, 0.95);
  --ink-secondary: #31302e;    /* secondary copy, footer */
  --ink-muted: #615d59;        /* supporting / muted */
  --ink-faint: #a39e98;        /* captions, metadata, placeholders */

  /* ---- Semantic aliases ---- */
  --text-heading: var(--ink-95);
  --text-body: var(--ink-secondary);
  --text-muted: var(--ink-muted);
  --text-faint: var(--ink-faint);
  --text-link: var(--primary);

  --surface-page: var(--canvas-soft);
  --surface-card: var(--surface);
  --border-default: var(--hairline);
  --focus-ring: var(--primary);
}