/*
  Design tokens for worklifeolga.com.
  Brand colors and fonts are Olga's actual brand values — everything else
  (spacing scale, radii, shadows) is a placeholder built to hold them.

  Contrast notes (WCAG AA, checked by eye against sRGB values):
  - Navy (#0d0d55) on off-white or on lime/pink: very high contrast, safe
    for any text size.
  - White/off-white on navy: very high contrast, safe for any text size.
  - White on bluey (#5171ff): borderline for small body text, fine for
    large text (headlines, buttons) and non-text UI — so bluey is used for
    large/short text and accents, not body copy.
  - Lime and pink are used as accents (underlines, pills, small fills,
    hover states) rather than large body-text backgrounds.
*/

:root {
  /* Brand palette */
  --color-navy: #0d0d55;
  --color-lime: #d9f201;
  --color-pink: #fa879f;
  --color-bluey: #5171ff;

  /* Neutrals built around the brand palette */
  --color-bg: #faf8f2;       /* warm off-white, primary background */
  --color-bg-alt: #f1efe6;   /* slightly deeper warm neutral, alternating sections */
  --color-ink: var(--color-navy); /* primary text color on light backgrounds */
  --color-ink-muted: #4a4a72;      /* secondary text, still AA on --color-bg */
  --color-paper: #faf8f2;    /* text-on-dark color (reads as off-white on navy) */
  --color-border: rgba(13, 13, 85, 0.14);

  /* Fonts (as given) */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  /* Garet is a commercial font with no CDN — declared first so it's used
     the moment real font files are added (see assets/README.md).
     Poppins is the live Google Fonts fallback until then. */
  --font-body: "Garet", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3.5rem;
  --text-4xl: 4.5rem;

  /* Spacing scale — generous, editorial whitespace */
  --space-2xs: 0.5rem;
  --space-xs: 0.875rem;
  --space-sm: 1.5rem;
  --space-md: 2.5rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;

  /* Layout */
  --content-width: 1180px;
  --content-width-narrow: 720px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* Motion */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-base: 0.6s;
  --duration-fast: 0.25s;
}