/* =============================================================================
   assets/css/variables.css
   -----------------------------------------------------------------------------
   This file only stores "variables" (CSS calls them custom properties).
   Think of each one as a labeled box holding a color or a number, so we
   don't have to retype the same value in 50 places.

   Example: --color-primary holds our main brown color. Anywhere else in the
   CSS you'll see var(--color-primary) -- that just means "go get the value
   from that box". Change the value here once and it updates everywhere.

   The theme files (theme-white.css, theme-regular.css, theme-autumn.css,
   theme-winter.css) reuse these SAME variable names but give them different
   colors. Whichever theme.css is loaded last on the page "wins", which is
   how the theme picker in admin/theme.php can change 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;
  --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. color-mix() blends a color with "transparent" to make a
     soft, tinted shadow instead of plain grey -- so every theme's shadows
     match that theme's own color automatically. */
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--color-primary-dark) 12%, transparent);
  --shadow-md: 0 10px 28px -8px color-mix(in srgb, var(--color-primary-dark) 26%, transparent);
  --shadow-lg: 0 24px 48px -12px color-mix(in srgb, var(--color-primary-dark) 30%, transparent);
  --shadow-glow: 0 10px 24px -6px color-mix(in srgb, var(--color-accent) 55%, transparent);

  /* How fast hover/focus effects animate */
  --transition: 180ms ease;
  --transition-slow: 320ms cubic-bezier(.22, 1, .36, 1);
}