/* Felidae design system tokens
   Source of truth for the website redesign. */

:root {
  /* Golds */
  --gold-500: #c4963a;
  --gold-400: #d7b765;  /* primary: buttons, eyebrows, stats */
  --gold-300: #e4ca8a;
  --gold-200: #efddb0;  /* unused */
  --gold-100: #f8f0d6;  /* tinted panels */

  /* Browns: actions and links */
  --brown-800: #5a3e1e;
  --brown-700: #814e12;  /* buttons, links, focus borders */
  --brown-600: #9a5e1a;  /* button hover */
  --brown-500: #b87333;  /* unused */
  --brown-400: #8a6240;
  --brown-300: #b8906a;

  /* Darks: backgrounds and body text */
  --nav-bg:       #211102;
  --espresso-900: #1f1204;
  --espresso-800: #2e1a06;
  --espresso-700: #3d2209;

  /* Lights */
  --cream-100: #fffbf0;  /* page background */
  --cream-200: #fff8e6;  /* section panels */
  --cream-300: #fdf4dd;
  --white:     #ffffff;

  /* Project accents, from the 2021 brand book. Unused until project pages. */
  --project-bapp:      #7292a1;
  --project-tsavo:     #b14a57;
  --project-patagonia: #61568a;
  --project-lwl:       #007d00;
  --project-babp:      #8d8513;
  --project-cat-aware: #fcf6b3;
  --project-argentina: #c88712;

  /* Provisional accents — these projects have no brand-book colour yet.
     Picked to sit inside the existing palette; confirm with Zara / Ben. */
  --project-pumalink:  #6b7f52;
  --project-bhutan:    #9a6f9b;
  --project-health:    #4f8a84;
  --project-wilde:     #a3782f;

  /* Type */
  --font-display: 'Raleway', system-ui, sans-serif;
  --font-body:    'Literata', Georgia, 'Times New Roman', serif;

  /* Layout */
  --nav-h: 86px;
  --max-w: 1280px;
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;

  /* Theme picker swatches — each theme's surface, shown side by side.
     Deliberately fixed values, not var(--espresso-900): the swatches must
     keep showing both options whichever theme is active. */
  --theme-1-swatch: #1f1204;
  --theme-2-swatch: #3c2203;

  --shadow-sm: 0 1px 3px rgba(31,18,4,.10);
  --shadow-md: 0 4px 16px rgba(31,18,4,.14);
  --shadow-lg: 0 12px 40px rgba(31,18,4,.12);

  /* Channels for translucent tints. Keep in sync with the hex values above. */
  --gold-rgb:  215,183,101;   /* --gold-400 */
  --cream-rgb: 255,251,240;   /* --cream-100 */
  --brown-rgb: 129,78,18;     /* --brown-700 */
  --ink-rgb:   20,10,2;       /* deep shade, darker than espresso-900 */
  --white-rgb: 255,255,255;
  --black-rgb: 0,0,0;

  /* Conservation status, IUCN categories */
  --status-lc: #60c060;  /* least concern */
  --status-vu: #f0c040;  /* vulnerable */
  --status-en: #f08040;  /* endangered */
  --status-cr: #e84040;  /* critically endangered */
  --trend-stable: #6ddf6d;
  --trend-down:   #ff6b45;

  /* Component surfaces */
  --cta-donate-bg: var(--espresso-700);

}

/* Alternate theme, toggled by tapping the logo */
[data-theme="2"] {
  --nav-bg:       #2d1b06;
  --cta-donate-bg: #4c2901;
  --espresso-900: #3c2203;
  --espresso-800: #7a4a12;
  --espresso-700: #914f14;
}