/*
  theme.css
  - VARIABLES ONLY (no component styling)
  - Default theme: Proposed Palette (cool blue-white + warm cream)
*/

:root {
  /* ========== RGBA VALUES (needed first) ========== */
  --text-70: rgba(33, 52, 72, 0.72);
  --text-50: rgba(33, 52, 72, 0.5);

  /* ========== SURFACES ========== */
  --bg: #f7f5f0;           /* Main page background (warm off-white) */
  --bg-alt: #f5f1e6;       /* Alternate sections (warm cream) */
  --surface: #ffffff;      /* Cards, modals, forms */
  --surface-hover: #f9fafb;/* Hover state for surfaces */

  /* ========== TEXT ========== */
  --text: #213448;         	/* Primary text */
  --text-dark: #111111;    	/* Darker text for emphasis */
  --text-light: var(--text-70);   /* ALIAS: Legacy name for muted */
  --muted: var(--text-70);        /* Secondary text, meta info */

  /* ========== BORDERS ========== */
  --border: #e5e7eb;       /* Borders, dividers (neutral gray) */
  --border-light: #e5e7eb; /* Lighter borders */
  --border-soft: rgba(148, 180, 193, 0.35);

  /* ========== BRAND ========== */
  --brand: #486881;        /* Primary brand (navigation, links) */
  --brand-dark: #213448;   /* Dark brand variant */
  --brand-light: #5a7a94;  /* Light brand variant */

  /* Legacy brand aliases */
  --primary: #486881;
  --primary-dark: #213448;
  --primary-light: rgba(72, 104, 129, 0.15);

  /* ========== ACTIONS (CTA) ========== */
  --cta: #FF385C;          /* Call-to-action buttons */
  --cta-hover: #E31C5F;    /* CTA hover state */
  --cta-light: #FFF5F7;    /* CTA light background */
  --cta-bg: #FFE4E9;       /* CTA background tint */
  
  /* Accent aliases (for quiz hero) */
  --accent: #FF385C;
  --accentHover: #E31C5F;

  /* ========== WHATSAPP ========== */
  --whatsapp: #25D366;     /* WhatsApp button */
  --whatsapp-hover: #128C7E;/* WhatsApp hover */
  
  /* Platform brand colors */
  --airbnb: #FF385C;       /* Airbnb brand */
  --airbnb-bg: rgba(255, 88, 93, 0.08);
  --booking: #003580;      /* Booking.com brand */
  --booking-bg: rgba(0, 53, 128, 0.08);
  --vrbo: #3D67B5;         /* VRBO brand */
  --vrbo-bg: rgba(61, 103, 181, 0.08);

  /* ========== SUCCESS (Green) ========== */
  --success: #22C55E;      /* Success primary */
  --success-dark: #166534; /* Success dark */
  --success-darker: #065F46;/* Success even darker */
  --success-light: #86EFAC;/* Success light */
  --success-bg: #F0FDF4;   /* Success background */
  --success-bg-alt: #DCFCE7;/* Success alt background */
  --success-bg-deep: #D1FAE5;/* Success deep background */

  /* ========== WARNING (Amber/Yellow) ========== */
  --warning: #F59E0B;      /* Warning primary */
  --warning-dark: #92400E; /* Warning dark */
  --warning-light: #FCD34D;/* Warning light */
  --warning-bg: #FEF3C7;   /* Warning background */

  /* ========== ERROR (Red) ========== */
  --error: #DC2626;        /* Error primary */
  --error-dark: #991B1B;   /* Error dark */
  --error-darker: #7F1D1D; /* Error even darker */
  --error-light: #FECACA;  /* Error light */
  --error-bg: #FEF2F2;     /* Error background */
  --error-bg-alt: #FEE2E2; /* Error alt background */

  /* ========== INFO (Blue) ========== */
  --info: #1E40AF;         /* Info primary */
  --info-dark: #3730A3;    /* Info dark (indigo) */
  --info-bg: #DBEAFE;      /* Info background */
  --info-bg-alt: #E0E7FF;  /* Info alt background (indigo tint) */

  /* ========== ACCENT (Pink) ========== */
  --accent-pink: #9D174D;  /* Pink accent */
  --accent-pink-bg: #FFF5F7;/* Pink background */

  /* ========== CATEGORY COLORS ========== */
  /* For blog categories */
  --cat-prihodi: #22C55E;
  --cat-prihodi-bg: #F0FDF4;
  --cat-operativa: #3B82F6;
  --cat-operativa-bg: #EFF6FF;
  --cat-marketing: #F59E0B;
  --cat-marketing-bg: #FEF3C7;
  --cat-gosti: #EC4899;
  --cat-gosti-bg: #FDF2F8;
  --cat-color: var(--brand); /* Default category color */

  /* ========== LEGACY ALIASES ========== */
  --surface-2: var(--bg-alt);
  --brand-2: var(--brand-dark);
  --accent: var(--cta);       /* accent ostaje CTA boja */
  --accent-ui: var(--border); /* ako ti treba legacy “accent” za bordere */
  --accent-2: var(--bg-alt);
  --link: var(--brand);
  --link-hover: var(--brand-dark);
  --button-bg: var(--cta);
  --button-text: #ffffff;
  --button-border: var(--cta);

  /* ========== SHADOWS ========== */
  --shadow-color: rgba(33, 52, 72, 0.10);
  --shadow-sm: 0 1px 2px 0 var(--shadow-color);
  --shadow: 0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color);
  --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);

  /* ========== RGBA SURFACES ========== */
  --surface-95: rgba(255, 255, 255, 0.95);
  --surface-97: rgba(255, 255, 255, 0.97);
}

/*
  MIDNIGHT THEME (Dark mode)
*/
:root[data-theme="midnight"] {
  --bg: #0B1220;
  --bg-alt: #101B2E;
  --surface: #16253F;
  --surface-hover: #1c2d4a;
  
  --text: #EAE0CF;
  --text-dark: #ffffff;
  --text-light: rgba(234, 224, 207, 0.78);
  --muted: rgba(234, 224, 207, 0.78);
  
  --border: rgba(148, 180, 193, 0.45);
  --border-light: rgba(148, 180, 193, 0.25);
  --border-soft: rgba(148, 180, 193, 0.22);
  
  --brand: #94B4C1;
  --brand-dark: #b4d0db;
  --brand-light: #7a9aa8;
  --primary: #94B4C1;
  --primary-dark: #b4d0db;
  --primary-light: rgba(148, 180, 193, 0.2);
  
  --cta: #FF385C;
  --cta-hover: #ff5a78;
  --cta-light: rgba(255, 56, 92, 0.15);
  --cta-bg: rgba(255, 56, 92, 0.2);
  
  --surface-95: rgba(22, 37, 63, 0.95);
  --surface-97: rgba(22, 37, 63, 0.97);
  
  --shadow-color: rgba(0, 0, 0, 0.35);
}

/*
  SANDSTONE THEME (Warm alternative)
*/
:root[data-theme="sandstone"] {
  --bg: #F1E6D2;
  --bg-alt: #E8D8BE;
  --surface: #FFF7EA;
  --surface-hover: #fff9f0;
  
  --text: #2A2A2A;
  --text-dark: #111111;
  --text-light: rgba(42, 42, 42, 0.72);
  --muted: rgba(42, 42, 42, 0.72);
  
  --border: rgba(84, 119, 146, 0.55);
  --border-light: rgba(84, 119, 146, 0.35);
  --border-soft: rgba(84, 119, 146, 0.28);
  
  --brand: #547792;
  --brand-dark: #213448;
  --brand-light: #6a8da8;
  --primary: #547792;
  --primary-dark: #213448;
  --primary-light: rgba(84, 119, 146, 0.15);
  
  --shadow-color: rgba(33, 52, 72, 0.18);
}