/* ==========================================================================
   THEME: Pet Wiki (Default — Warm Pet)
   --------------------------------------------------------------------------
   This file defines the entire visual identity of the site:
     - Color palette (primary / accent / surface / text / borders)
     - Gradients (hero / CTA / card)
     - Font families (display / body)
     - Radii (corner roundness)
     - Shadows (use theme colors)
     - Layout sizing constants (max-width, content-max, header-height)
     - Category-specific colors
     - Theme-driven decorative styles (brand text gradient, search icon,
       desktop body background, search highlight)

   To deploy a new site with a different look:
     1. Copy this file as e.g. theme-ocean.css or theme-forest.css
     2. Change the :root variable values
     3. Update the <link> in each HTML to point at the new file

   base.css never needs to change.
   ========================================================================== */

:root {
  /* -- Brand palette --------------------------------------------------- */
  --color-primary:        #1E88E5;   /* links, primary actions */
  --color-primary-dark:   #0D47A1;   /* hover for primary */
  --color-accent:         #FF8C42;   /* main brand orange */
  --color-accent-soft:    #FFE4D1;   /* light orange tint */
  --color-pink:           #FF6B9D;   /* secondary accent */
  --color-green:          #4ECDC4;   /* tertiary teal */
  --color-bg:             #FFFBF5;   /* page background (warm cream) */
  --color-surface:        #FFFFFF;   /* card / surface white */
  --color-text:           #2D3436;   /* body text */
  --color-muted:          #6C7A89;   /* secondary text */
  --color-border:         #F0E6D8;   /* warm border */
  --color-tag-bg:         #FFF4E6;   /* tag chip background */

  /* -- Gradients -------------------------------------------------------- */
  --gradient-hero: linear-gradient(135deg, #FF8C42 0%, #FF6B9D 50%, #1E88E5 100%);
  --gradient-cta:  linear-gradient(90deg, #FF8C42, #FF6B9D);
  --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FFFBF5 100%);

  /* -- Fonts ------------------------------------------------------------ */
  --font-display: 'Fredoka One', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* -- Radii (corner roundness) ---------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* -- Shadows (tinted with accent color) ------------------------------- */
  --shadow-sm:    0 2px 8px rgba(255, 140, 66, 0.08);
  --shadow-card:  0 4px 20px rgba(45, 52, 54, 0.08);
  --shadow-hover: 0 8px 32px rgba(255, 140, 66, 0.20);

  /* -- Layout sizing (kept here so themes can override) ---------------- */
  --max-width:     480px;
  --content-max:   720px;
  --header-height: 64px;
}

/* ==========================================================================
   Category-specific accent colors
   Each category chip can be themed by setting --chip-color on its data-color
   attribute. base.css reads this variable for borders / backgrounds.
   ========================================================================== */
.category-chip[data-color="dogs"]        { --chip-color: #1E88E5; }
.category-chip[data-color="cats"]        { --chip-color: #FF6B9D; }
.category-chip[data-color="fish"]        { --chip-color: #4ECDC4; }
.category-chip[data-color="reptiles"]    { --chip-color: #FF8C42; }
.category-chip[data-color="exotic-pets"] { --chip-color: #9B59B6; }
.category-chip[data-color="emergency"]   { --chip-color: #E74C3C; }
.category-chip[data-color="pets"]        { --chip-color: #6C7A89; }

/* ==========================================================================
   Theme-driven decorative styles
   Rules here are purely visual (color / font / icon / decorative gradient).
   Structural properties (size, position, flex, grid) live in base.css.
   ========================================================================== */

/* Body baseline typography (color + font only) */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

/* Brand name — gradient text (uses theme gradient + transparent text fill) */
.brand-name {
  background: var(--gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Search input — inline SVG icon (color baked into the URL) */
.search-input {
  background: var(--color-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8C42' stroke-width='2.5'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 10px center / 16px;
}

/* Search result keyword highlight (semi-transparent accent) */
.search-result mark {
  background: rgba(255, 140, 66, 0.22);
  color: inherit;
}

/* Search bar focus glow (tinted with accent) */
.search-bar-large:focus-within {
  box-shadow: 0 2px 12px rgba(255, 140, 66, 0.12);
}

/* Desktop body background — soft warm gradient (decorative, theme-specific) */
@media (min-width: 769px) {
  body {
    background: linear-gradient(135deg, #FFE4D1 0%, #E8F4F8 100%);
    min-height: 100vh;
  }
}