/* ============================================================
   BRAND THEME VARIABLES
   Social Media Content Creator — Gomathi & Mana Kodi
   ============================================================ */

/* ---------- Default / Gomathi Theme ---------- */
:root,
[data-brand="gomathi"] {
  --brand-primary: #8B6914;
  --brand-secondary: #ece4ba;
  --brand-accent: #e6bd80;
  --brand-bg: #faf8f0;
  --brand-text: #2d2a1e;
  --brand-dark: #3d3520;
  --brand-light: #f5eddf;
  --brand-gradient-start: #ece4ba;
  --brand-gradient-end: #f5eddf;
}

/* ---------- Mana Kodi Theme ---------- */
[data-brand="manakodi"] {
  --brand-primary: #C62828;
  --brand-secondary: #FFCDD2;
  --brand-accent: #FF5722;
  --brand-bg: #FFF8F0;
  --brand-text: #1a1a1a;
  --brand-dark: #B71C1C;
  --brand-light: #FFEBEE;
  --brand-gradient-start: #C62828;
  --brand-gradient-end: #FF5722;
}

/* ---------- App UI Variables ---------- */
:root {
  /* Surfaces */
  --surface-0: #ffffff;
  --surface-1: #f7f7f8;
  --surface-2: #efefef;
  --surface-3: #e4e4e7;
  --surface-hover: #f0f0f3;
  
  /* UI Colors */
  --ui-text: #18181b;
  --ui-text-secondary: #71717a;
  --ui-text-tertiary: #a1a1aa;
  --ui-border: #e4e4e7;
  --ui-border-focus: #3b82f6;
  --ui-success: #22c55e;
  --ui-warning: #f59e0b;
  --ui-error: #ef4444;
  --ui-info: #3b82f6;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  
  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Typography */
  --font-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* Layout */
  --sidebar-width: 320px;
  --header-height: 56px;
  --panel-width: 300px;
}

/* ---------- Font Faces ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Noto+Sans+Telugu:wght@400;700&display=swap');