/* Vendored from Christina's design handoff, August 2026 — do not edit here; update the handoff and re-vendor. */
/* A Mutual Friend — design tokens v1.0
   Palette: "Periwinkle" system. Chartreuse is the ACTION color only.
   Import this file, or copy the :root block into your global stylesheet. */

:root {
  /* Brand */
  --amf-chartreuse:       #D4F13F;  /* actions only: primary buttons, logo mark, future tappable chips */
  --amf-periwinkle:       #5A68E0;  /* user identity: sent bubbles, text links, status text (AA on white) */
  --amf-periwinkle-light: #7C89F5;  /* focus rings, decorative accents, icons paired with text — never text alone */
  --amf-lilac:            #E8EAFD;  /* received bubbles, section tints, dividers on white */
  --amf-navy:             #1D2142;  /* all primary text; replaces black everywhere */

  /* Surfaces */
  --amf-canvas:     #FCFCFF;      /* app/page background */
  --amf-surface:    #FFFFFF;      /* headers, cards, inputs */

  /* Supporting */
  --amf-slate:      #667096;      /* muted text: placeholders, timestamps, metadata (AA on white) */
  --amf-border:     #C3C9F0;      /* input borders, stronger dividers */
  --amf-navy-soft:  #2E3563;      /* dark-mode surfaces; hover state on navy */

  /* Semantic aliases — reference these in components */
  --amf-action-bg:        var(--amf-chartreuse);
  --amf-action-text:      var(--amf-navy);      /* navy on chartreuse: 12.9:1 contrast */
  --amf-bubble-sent-bg:   var(--amf-periwinkle);
  --amf-bubble-sent-text: var(--amf-canvas);
  --amf-bubble-recv-bg:   var(--amf-lilac);
  --amf-bubble-recv-text: var(--amf-navy);
  --amf-text-primary:     var(--amf-navy);
  --amf-text-muted:       var(--amf-slate);
  --amf-link:             var(--amf-periwinkle);

  /* Type */
  --amf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shape */
  --amf-radius-bubble: 16px;
  --amf-radius-bubble-tail: 4px;   /* corner nearest the sender */
  --amf-radius-pill: 22px;         /* buttons, input field */
  --amf-radius-card: 16px;
}

/* Usage rules (enforced by convention, not CSS):
   1. Chartreuse = action. Never use it decoratively or behind body text blocks.
   2. Never place chartreuse on black or navy backgrounds at large scale.
      Chartreuse elements sit on white/canvas; navy text sits ON chartreuse.
   3. Emphasis inside messages is font-weight 600 — never a color highlight.
   4. One accent per view: the primary action is chartreuse; everything else
      stays periwinkle/lilac/navy.
   5. Muted text (--amf-slate) is for metadata only, never body copy.
   6. Contrast: --amf-periwinkle (#5A68E0) is the minimum shade for text or
      text-bearing fills on white (4.57:1). --amf-periwinkle-light (#7C89F5)
      is decorative only — 3.0:1, fails AA for text. */