/* MyKid site — b-near.me's design system, in MyKid's colour.
 * ============================================================================
 * The system is the one behind b-near.me: a warm off-white ground, light
 * type, generous corners and shadows you can barely see. Names, scales and
 * values are that project's tokens.css, so the two sites are recognisably
 * built by the same hand — which is the point.
 *
 * What changes is the accent. b-near is teal with a coral heart; MyKid is
 * indigo — #4f5bd5 is the accent in the child's app, the ground his icon is
 * drawn on, and the colour on his tablet every day. The ramp keeps b-near's
 * shape and its rule: the base is the MARK, and white text never sits on it
 * without stepping one deeper.
 *
 * Measured on this ground (#fbfbfa): 500 3.41:1 · 600 4.96:1 · 700 7.31:1.
 * b-near's own note applies unchanged — the mark is for borders, dots and
 * large type; a label somebody has to read takes the deeper step.
 * ============================================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bn-bg: #fbfbfa;
  --bn-card: #ffffff;
  --bn-ink: #16182b;      /* MyKid's own --ink; b-near's is a green-black */
  --bn-muted: #6a6f85;    /* the same step deeper that b-near takes for AA */
  --bn-line: #e8e9f0;

  /* ── The accent ramp ──────────────────────────────────────────────────── */
  --color-accent:     #4f5bd5;
  --color-accent-100: #f0f1fd;
  --color-accent-200: #dcdefa;
  --color-accent-300: #bfc4f4;
  --color-accent-400: #9aa1ec;
  --color-accent-500: #6f79e2;
  --color-accent-600: #4f5bd5;
  --color-accent-700: #3a43ab;
  --color-accent-800: #2b3180;
  --color-accent-900: #1f2459;

  /* The violet the app pairs with the indigo, where b-near has its coral. */
  --bn-violet: #7d5bf0;
  /* His stars, and the app's own warning yellow. */
  --bn-star: #ffc93c;
  --bn-coral: #d6337f;    /* MyKid's --bad, which is where its coral sits */

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --bn-font: 'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --bn-wordmark: 'Nunito', var(--bn-font);

  --fs-stat:    40px;   /* stat figure, weight 200 */
  --fs-h2:      19px;   /* section, weight 500 */
  --fs-h3:      16px;   /* card, weight 500 */
  --fs-lede:    19px;   /* hero lede, weight 300 */
  --fs-body:    15px;
  --fs-body-sm: 14px;
  --fs-meta:    13px;
  --fs-cap:     12px;

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --r-card:    22px;
  --r-card-lg: 26px;
  --r-tile:    16px;
  --r-pill:    999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 28px;
  --s-7: 34px;
  --s-8: 44px;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --shadow-card: 0 18px 40px rgba(22, 24, 43, 0.07);
  --shadow-accent: 0 6px 18px rgba(79, 91, 213, 0.26);
  --shadow-accent-hi: 0 12px 26px rgba(79, 91, 213, 0.32);
  --ease-lift: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── The aliases the component layer reads ────────────────────────────── */
  --bg: var(--bn-bg);
  --card: var(--bn-card);
  --line: var(--bn-line);
  --text: var(--bn-ink);
  --text-dim: var(--bn-muted);
  --accent: var(--color-accent);
  --accent-deep: var(--color-accent-700);
  --accent-tint: var(--color-accent-100);
  /* White on the base measures 4.96:1 and clears AA outright — where b-near
     needs a deeper fill for white text, this accent does not. Kept as its own
     token anyway, so the rule survives a change of hue. */
  --accent-fill: var(--color-accent);
  --on-accent: #ffffff;

  --page: 1240px;
  --inset: var(--s-7);
}