/*
  theme.css — single source of truth for design tokens.
  Load this ONCE in base.html, before any other <style> block or
  page-level CSS. No other template should define its own :root
  with color/font values — they should only reference these variables.

  To retheme the whole site later: edit this file only.
*/

:root {
  /* ── Brand pink — was split between base.html (--pink-500: #e84d70)
     and category.html (--pink: #f9a8c9). Standardized on the deeper,
     higher-contrast rose from base.html. ── */
  --pink-50:  #fff0f3;
  --pink-100: #ffd7e1;
  --pink-200: #ffc8d5;
  --pink-300: #ff9db3;
  --pink-400: #ff6b8a;
  --pink-500: #e84d70;   /* primary brand color */
  --pink-600: #c73058;
  --pink-700: #9e1f43;

  /* ── Neutral / gray scale — was flat (#212121 repeated) in base.html.
     Now has real tonal range for hierarchy. ── */
  --gray-50:  #faf9f8;
  --gray-100: #f0eeeb;
  --gray-200: #e3dfd9;
  --gray-300: #c9c5be;
  --gray-400: #a8a297;
  --gray-500: #8b8579;
  --gray-600: #6b665a;
  --gray-700: #4a453d;
  --gray-800: #2c2822;
  --gray-900: #201c16;

  --white: #ffffff;
  --off-white: #fdf9f9;

  /* ── Soft pastel backgrounds (category.html's --pink-soft etc.
     folded in here under one naming convention) ── */
  --soft-pink:   #fff0f3;
  --soft-peach:  #fff5ef;
  --soft-lav:    #f5f0ff;
  --soft-mint:   #edfff6;
  --soft-yellow: #fffbf0;

  /* ── Functional colors ── */
  --success: #2e7d32;
  --error:   #c62828;
  --warning: #e65100;
  --info:    #0277bd;

  /* ── Typography — unified on one display/body pairing.
     (base.html used Playfair Display; category.html also referenced
     Playfair — already aligned, just centralizing the declaration.) ── */
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'Nunito', sans-serif;

  /* ── Motion / shape ── */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 9999px;

  /* ── Layout ── */
  --header-h: 68px;
}