/* css variables (custom properties) - colors/fonts/etc reused everywhere.
   theme-*.css files reuse these same names with different values, and
   whichever theme file loads last wins -- that's how the theme picker
   in admin/theme.php swaps the whole site's look */
:root {
  /* Page colors */
  --color-bg: #faf7f2;
  --color-surface: #ffffff;
  --color-text: #2b2320;
  --color-text-muted: #6b5f57;

  /* Brand colors (buttons, links, headings) */
  --color-primary: #6f4e37;
  --color-primary-dark: #4a3225;
  --color-accent: #c98a3b;
  /* darker shade of accent, for buttons with white text (plain accent is
     sometimes too light to stay readable). each theme has its own version */
  --color-accent-dark: #966732;
  --color-border: #e7ddd2;

  /* Alert colors (success / error messages) */
  --color-success: #3a7a4e;
  --color-success-bg: #e6f4ea;
  --color-success-border: #bfe3c9;
  --color-danger: #b3402a;
  --color-danger-bg: #fbe9e5;
  --color-danger-border: #f0c3b8;

  /* Fonts */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Rounded corners: small, normal, large */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  /* drop shadows: black at different opacity (last number = how opaque)
     for small/medium/large */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);
  --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, .22);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .28);

  /* How fast hover/focus effects animate */
  --transition: 180ms ease;
  --transition-slow: 320ms ease-out;
}