/* Design tokens.
 *
 * Palette comes from the transgender pride flag, led by the pink: pink is the
 * accent for anything actionable, the flag blue is a wash in the background and
 * the opening note of the score arc. White carries everything else.
 *
 * Light only, on purpose. A dark variant of a pastel flag palette either loses
 * the colours or turns muddy, and this page is a two-minute visit.
 */
:root {
  color-scheme: light;

  --pink-50:  #fff4f7;
  --pink-100: #ffe6ec;
  --pink-200: #fbccd7;
  --pink-300: #f5a9b8; /* flag pink */
  --pink-400: #ee8299;
  --pink-500: #e05f7c;
  --pink-600: #c8425f;
  --pink-700: #a13049;

  --blue-100: #ddf2fe;
  --blue-200: #b6e6fc;
  --blue-300: #5bcefa; /* flag blue */
  --blue-400: #32b7ec;
  --blue-500: #1a9bd2;

  --ink-900: #1b1017;
  --ink-800: #2b1d25;
  --ink-700: #46333d;
  --ink-600: #6b545f;
  --ink-500: #8a7480;
  --ink-400: #a8949e;
  --ink-300: #c8b8c0;
  --ink-200: #e4d8dd;
  --ink-100: #f0e8eb;
  --ink-50:  #faf6f8;

  /* semantic */
  --surface: #ffffff;
  --surface-muted: var(--ink-50);
  --surface-sunken: #f6eef1;
  --border: rgba(60, 26, 40, 0.10);
  --border-strong: rgba(60, 26, 40, 0.18);
  --text: var(--ink-900);
  --text-soft: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --accent: var(--pink-600);
  --accent-hover: var(--pink-700);
  /* Buttons carry a lighter pink than text does: large bold labels still
     clear AA at this contrast, and it keeps the page pink rather than crimson. */
  --btn: var(--pink-500);
  --btn-hover: var(--pink-600);
  --accent-soft: var(--pink-50);
  --accent-line: var(--pink-200);
  --on-accent: #ffffff;
  --warn-bg: #fff6e8;
  --warn-line: #f0cd93;
  --warn-text: #7c4f10;

  /* Pink-led, with the flag blue only as the opening note of the sweep. */
  --brand-gradient: linear-gradient(135deg, #7fd6fa 0%, #f5a9b8 42%, #e05f7c 100%);

  /* the page base; the drifting blooms on top of it live in base.css */
  --page-wash: linear-gradient(180deg, #ffffff 0%, #fffcfd 60%, #fefafc 100%);

  --shadow-sm: 0 1px 2px rgba(60, 26, 40, 0.05);
  --shadow-md: 0 6px 20px rgba(60, 26, 40, 0.07);
  --shadow-lg: 0 20px 50px rgba(60, 26, 40, 0.18);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 44px;
  --s-9: 64px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 480ms;
  --ease: cubic-bezier(0.22, 0.68, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* a little overshoot: things arrive, they do not just appear */
  --ease-spring: cubic-bezier(0.34, 1.32, 0.52, 1);

  --col: 560px;        /* the one reading column */
  --col-wide: 920px;   /* two-column session on roomy screens */
}