/* tokens.css — ShroudChat design tokens (store-listing doodle identity) */
:root {
  /* Brand: paper + ink + Play blue */
  --paper: #FAF9F6;
  --paper-warm: #F3F1EA;
  --ink: #0B0B0C;
  --ink-soft: #3A3A3E;
  --ink-mute: #6B6B72;
  --line: #E5E2D8;
  --white: #FFFFFF;
  --black: #0B0B0C;

  --blue: #1A73E8;
  --blue-deep: #0B57D0;
  --blue-soft: #E8F0FE;
  --blue-pale: #F0F6FF;

  /* Backwards-compat aliases for legacy styles */
  --brand-50: var(--blue-pale);
  --brand-100: #DBEAFE;
  --brand-200: #BFDBFE;
  --brand-500: var(--blue);
  --brand-600: var(--blue);
  --brand-700: var(--blue-deep);
  --brand-800: #0A47A3;

  --ink-900: var(--ink);
  --ink-800: #1E293B;
  --ink-700: var(--ink-soft);
  --ink-600: var(--ink-mute);
  --ink-500: #8A8A93;
  --ink-400: #B9B9C2;
  --ink-200: var(--line);
  --ink-100: var(--paper-warm);
  --ink-50: var(--paper);

  --bg: var(--paper);
  --bg-soft: var(--paper-warm);
  --bg-alt: var(--blue-pale);
  --text: var(--ink-soft);
  --text-soft: var(--ink-mute);
  --heading: var(--ink);

  --success: #16A34A;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.07);
  --shadow-md: 0 4px 14px rgba(11, 11, 12, 0.09);
  --shadow-lg: 0 24px 60px rgba(11, 11, 12, 0.16);
  --shadow-blue: 0 12px 30px rgba(26, 115, 232, 0.32);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;

  --container: 1140px;
  --container-narrow: 760px;
  --gutter: 24px;
  --nav-h: 68px;
}