/* ============================================================
   DopaSpeak design tokens (single source of truth for the website)
   Language: "Paper + Ink" doodle, identical to the Android app and
   the web app (app/app.css). One accent only: pink. No gradients.
   Contrast: every text/background pair used on the site >= 4.5:1.
   ============================================================ */
:root {
  /* Surfaces */
  --paper:      #FAF6EF;
  --paper-2:    #F2ECE0;
  --card:       #FFFFFF;
  --sky:        #CFEAFF;
  --grass:      #CFE9C2;
  --nav-bg:     rgba(250, 246, 239, .92);
  --dot:        rgba(26, 22, 37, .11);

  /* Ink (text + outlines) */
  --ink:        #1A1625;
  --ink-soft:   #4B4458;
  --ink-mute:   #6E667C;   /* 5.06:1 on paper, 5.45:1 on white */
  --line:       #1A1625;
  --line-soft:  #E5DED1;

  /* Accent: pink, the only brand colour */
  --pink:       #E0407B;   /* surfaces, large type, decoration */
  --pink-d:     #B92E62;   /* solid buttons, small pink text: white on it 5.79:1 */
  --pink-soft:  #F9DEE9;

  /* Semantic (used sparingly, as in the app) */
  --ok:         #58A700;
  --ok-soft:    #E4F3D2;

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Figtree', system-ui, sans-serif;
  --font-body:    'Figtree', 'Figtree Fallback', system-ui, sans-serif;
  --font-hand:    'Patrick Hand', 'Hand Fallback', 'Bricolage Grotesque', cursive;

  /* Ink outline + hard offset shadow (the doodle signature) */
  --stroke:       2.5px;
  --shadow-1:     3px 4px 0 rgba(26, 22, 37, .16);
  --shadow-2:     5px 6px 0 rgba(26, 22, 37, .18);
  --shadow-3:     8px 10px 0 rgba(26, 22, 37, .14);
  --shadow-hover: 4px 5px 0 rgba(26, 22, 37, .18);
  --shadow-press: 1px 1px 0 rgba(26, 22, 37, .18);
  --drop:         drop-shadow(2px 3px 0 rgba(26, 22, 37, .16));

  /* Wonky radii (hand-drawn feel) */
  --r-pill:     999px;
  --r-wonk:     18px 22px 19px 23px / 22px 18px 23px 19px;
  --r-wonk2:    24px 19px 23px 18px / 19px 24px 18px 23px;
  --r-md:       14px;

  /* Spacing (4pt scale) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Layout */
  --wrap: 1160px;
  --nav-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .15s;
  --t-med: .35s;
}