/**
 * Snaxbox v2 - Color Palette: Terracotta
 *
 * A warm, earthy palette with terracotta orange as primary.
 * Feels human, inviting, and grounded.
 *
 * Base colors:
 * - Crail (Primary): #C15F3C
 * - Pampas (Background): #F4F3EE
 * - Dark Orange: #A14A2F
 * - Dark Text: #2c2c2c
 * - Light Text: #e8e6e3
 */

:root {
  /* ========================================
     PRIMARY - Terracotta Orange
     Built around #C15F3C with warm undertones
     ======================================== */
  --color-primary-50: #fdf6f3;
  --color-primary-100: #fbeae4;
  --color-primary-200: #f7d4c8;
  --color-primary-300: #f0b5a0;
  --color-primary-400: #e08a6a;
  --color-primary-500: #C15F3C; /* Main - Crail */
  --color-primary-600: #A14A2F; /* Dark Orange emphasis */
  --color-primary-700: #863d28;
  --color-primary-800: #6e3323;
  --color-primary-900: #5c2d20;

  /* ========================================
     SECONDARY - Sage Green
     Complements terracotta with earthy green
     ======================================== */
  --color-secondary-50: #f6f7f4;
  --color-secondary-100: #e8ebe3;
  --color-secondary-200: #d3d9c8;
  --color-secondary-300: #b5c0a4;
  --color-secondary-400: #96a67f;
  --color-secondary-500: #7a8c62;
  --color-secondary-600: #60704c;
  --color-secondary-700: #4c593e;
  --color-secondary-800: #404935;
  --color-secondary-900: #373f2f;

  /* ========================================
     GRAYSCALE - Warm Neutrals
     Tinted with warmth to match the palette
     ======================================== */
  --color-gray-50: #fafaf8;
  --color-gray-100: #f5f4f1;
  --color-gray-200: #e8e6e1;
  --color-gray-300: #d6d3cc;
  --color-gray-400: #a8a49b;
  --color-gray-500: #7a766d;
  --color-gray-600: #5c5850;
  --color-gray-700: #454239;
  --color-gray-800: #2c2c2c; /* Dark text */
  --color-gray-900: #1a1a18; /* Darkest */

  /* ========================================
     SEMANTIC COLORS
     Adjusted to harmonize with warm palette
     ======================================== */

  /* Success - Warm green */
  --color-success: #5a9a5a;
  --color-success-light: #e8f3e8;
  --color-success-dark: #3d7a3d;

  /* Warning - Golden amber */
  --color-warning: #d4a03a;
  --color-warning-light: #fdf6e3;
  --color-warning-dark: #b8862a;

  /* Error - Warm red (not too orange) */
  --color-error: #c94a4a;
  --color-error-light: #fce8e8;
  --color-error-dark: #a83838;

  /* Info - Muted blue-gray */
  --color-info: #5a7fa8;
  --color-info-light: #e8f0f8;
  --color-info-dark: #456a8f;

  /* ========================================
     BASE COLORS
     ======================================== */
  --color-white: #ffffff;
  --color-black: #1a1a18;
  --color-background: #f5ebdc; /* Warm cream/beige */
  --color-surface: #ffffff;
  --color-surface-alt: #F4F3EE; /* Pampas - light off-white */
  --color-sand: #e8dfd0; /* Warm sand for highlights */
  --color-text: #2c2c2c; /* Dark charcoal */
  --color-text-muted: #7a766d;
  --color-border: #e8e6e1;

  /* ========================================
     SHADOWS - Warmer tint
     ======================================== */
  --shadow-sm: 0 1px 2px 0 rgb(44 44 44 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(44 44 44 / 0.08), 0 2px 4px -2px rgb(44 44 44 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(44 44 44 / 0.08), 0 4px 6px -4px rgb(44 44 44 / 0.06);
  --shadow-xl: 0 20px 25px -5px rgb(44 44 44 / 0.1), 0 8px 10px -6px rgb(44 44 44 / 0.08);

  /* Primary color shadows */
  --shadow-primary: 0 4px 14px 0 rgb(193 95 60 / 0.35);
  --shadow-primary-lg: 0 8px 20px 0 rgb(193 95 60 / 0.4);
}

/* ========================================
   ADMIN SECTION - Darker theme elements
   Can mix light and dark within admin
   ======================================== */

/* Dark admin header/sidebar option */
.admin-dark-header {
  --admin-header-bg: #2c2c2c;
  --admin-header-text: #e8e6e3;
  --admin-header-border: #454239;
}

/* Dark stat cards option */
.admin-stat-dark {
  background: #2c2c2c;
  color: #e8e6e3;
}

.admin-stat-dark .stat-label {
  color: #a8a49b;
}