/* Zebramoon, design tokens. White-first, near-black type, one neutral gray,
   pink as accent (not as wallpaper). One source of truth for color, type,
   spacing, radii and shadows across the homepage and the five portals.
   Change a value here, it changes everywhere. */
:root{
  /* Color: white background, near-black ink, one neutral gray, pink accent */
  --ivory: #FFFFFF;       /* page background */
  --paper: #FAFAFA;       /* raised surface, cards, inputs */
  --white: #FFFFFF;
  --ink: #121214;         /* near-black */
  --ink-2: #1B1B1F;       /* secondary dark, panels on charcoal */
  --muted: #63636B;       /* body copy on light, neutral grey */
  --line: #E6E6EA;        /* hairline rule, neutral */
  --soft: #F2F2F4;        /* neutral surface tint (skeletons, disabled) */
  --charcoal: #17171B;    /* dark section background */
  --plum: #17171B;        /* alias kept for existing selectors */

  --pink: #E6007E;
  --pink-deep: #B80068;
  --pink-soft: #FFB8DA;
  --tint: #FCE4EF;        /* pale pink, selected-state surface */

  --gold: #B0862A;        /* rating stars, "today" marker */
  --danger-bg: #FDEBEA;
  --danger-ink: #B3261E;
  --ok-bg: #E9F5EA;
  --ok-ink: #1E7B34;

  /* Type: one grotesk family, Plus Jakarta Sans carries statements and
     headlines, Manrope carries body copy, UI and data. */
  --font-display: 'Plus Jakarta Sans', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  /* Geometry: soft enough to feel tactile, short enough to stay precise.
     Not a pill, not a right angle. */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-md: 12px;

  --shadow: 0 18px 40px rgba(18,18,20,.10);
  --shadow-sm: 0 4px 14px rgba(18,18,20,.08);
  --ease: cubic-bezier(.16,1,.3,1);

  /* Spacing scale, used for the intentionally uneven section rhythm */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;
}