/* FunSheets Theme Colors */
:root {
  /* === PRIMARY COLORS === */
  /* Main brand golden yellow theme */
  --primary-color: #fcd769;           /* Main golden yellow */
  --primary-hover: #FBBF24;           /* Darker golden on hover */
  --primary-light: #FEF3C7;           /* Light golden background */
  --primary-lighter: #fffef8;         /* Very light golden */
  --primary-border: #f9d878;          /* Golden border */
  --primary-accent: #F59E0B;          /* Golden accent */
  --primary-stroke: #ca810d;          /* Golden text stroke */
  
  /* Primary color variations with opacity */
  --primary-alpha-10: rgba(252, 215, 105, 0.1);
  --primary-alpha-20: rgba(252, 215, 105, 0.2);
  --primary-alpha-30: rgba(252, 215, 105, 0.3);
  --primary-border-alpha: rgba(251, 191, 36, 0.2);
  --primary-border-alpha-30: rgba(251, 191, 36, 0.3);
  --primary-glow: rgba(249, 216, 120, 0.2);
  --primary-glow-hover: rgba(249, 216, 120, 0.25);
  --primary-glow-strong: rgba(249, 216, 120, 0.3);
  
  /* === SECONDARY COLORS === */
  /* Orange/coral accent colors */
  --secondary-color: #FF714B;         /* Main orange */
  --secondary-hover: #e55a39;         /* Orange hover */
  --secondary-dark: #E55A3B;          /* Darker orange */
  --secondary-darker: #D14D32;        /* Even darker orange */
  --secondary-light: #ff5722;         /* Light orange variation */
  --secondary-alpha: rgba(255, 140, 0, 0.3);
  
  /* === NEUTRAL COLORS === */
  /* Text and background neutrals */
  --text-primary: #333;               /* Main text color */
  --text-secondary: #666;             /* Secondary text */
  --text-tertiary: #888;              /* Tertiary text */
  --text-muted: #999;                 /* Muted text */
  --text-dark: #222;                  /* Darker text */
  --text-alpha: rgba(51, 51, 51, 0.8);
  
  /* === GRAY SCALE === */
  /* Comprehensive gray palette */
  --gray-50: #f9fafb;                 /* Lightest gray */
  --gray-100: #f3f4f6;                /* Very light gray */
  --gray-200: #e5e7eb;                /* Light gray */
  --gray-300: #d1d5db;                /* Medium light gray */
  --gray-400: #9ca3af;                /* Medium gray */
  --gray-500: #6b7280;                /* Medium dark gray */
  --gray-600: #374151;                /* Dark gray */
  --gray-700: #1f2937;                /* Very dark gray */
  --gray-800: #111827;                /* Near black */
  --gray-900: #000;                   /* Black */
  
  /* Legacy gray variations */
  --gray-light: #f8f9fa;              /* Light backgrounds */
  --gray-border: #e0e0e0;             /* Borders */
  --gray-disabled: #a0a0a0;           /* Disabled states */
  --gray-divider: #eee;               /* Dividers */
  --gray-placeholder: #ccc;           /* Placeholders */
  --gray-subtle: #ddd;                /* Subtle elements */
  --gray-card: #f0f0f0;               /* Card backgrounds */
  --gray-ultralight: #f9f9f9;         /* Ultra light gray */
  --gray-form: #f3f3f3;               /* Form element gray */
  
  /* Additional gray scale variations */
  --gray-border-light: #dee2e6;       /* Light border gray */
  --gray-text-input: #495057;         /* Text input gray */
  
  /* === BACKGROUND COLORS === */
  /* Page and section backgrounds */
  --bg-primary: #fff;                 /* White background */
  --bg-secondary: #FFFFFC;            /* Off-white */
  --bg-cream: #f8f4e6;                /* Cream background */
  --bg-warm: #f0ead2;                 /* Warm background */
  --bg-warmest: #edeac2;              /* Warmest background */
  --bg-cool: #f8fafc;                 /* Cool background */
  --bg-blue-light: #e0f2fe;           /* Light blue */
  --bg-green-light: #e8f5e8;          /* Light green */
  --bg-blue-accent: #e8f2ff;          /* Blue accent */
  --bg-auth: #f8f9ff;                 /* Auth form background */
  --bg-warning: #fde68a;              /* Warning background */
  
  /* Background gradients */
  --bg-gradient-warm: linear-gradient(135deg, #f8f4e6 0%, #f0ead2 50%, #edeac2 100%);
  --bg-gradient-overlay: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  --bg-gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* === FUNCTIONAL COLORS === */
  /* Success, error, warning, info states */
  --success-color: #10b981;           /* Green success */
  --success-hover: #059669;           /* Success hover */
  --success-light: #e8f5e8;           /* Light success bg */
  --success-dark: #065f46;            /* Dark success text */
  --success-medium: #2e7d32;          /* Medium success green */
  
  --error-color: #ef4444;             /* Red error */
  --error-hover: #dc2626;             /* Error hover */
  --error-dark: #b91c1c;              /* Dark error */
  --error-text: #991b1b;              /* Error text */
  
  --warning-color: #f59e0b;           /* Warning yellow */
  --warning-light: #fde68a;           /* Light warning */
  
  --info-color: #3b82f6;              /* Blue info */
  --info-hover: #1976d2;             /* Info hover */
  --info-light: #e8f2ff;             /* Light info bg */
  --info-dark: #1e40af;              /* Dark info text */
  
    /* === INTERACTIVE COLORS === */
  /* Links, buttons, form elements */
  --link-color: #667eea;              /* Link color */
  --link-hover: #5b4ccc;              /* Link hover */
  --link-purple: #7c3aed;             /* Purple link */
  --link-purple-hover: #6d28d9;       /* Purple link hover */
  --link-special: #6b5cff;            /* Special link color */
  --link-gradient-purple: #764ba2;    /* Purple gradient end */

  --button-google: #4285F4;           /* Google button */
  --button-disabled: #a0a0a0;         /* Disabled button */

  /* Form states */
  --form-border: #e1e5e9;             /* Form borders */
  --form-border-focus: #7c3aed;       /* Focused form border */
  --form-shadow-focus: rgba(124, 58, 237, 0.1);
  
  /* === OVERLAY & SHADOW COLORS === */
  /* Modal overlays and shadows */
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-darker: rgba(0, 0, 0, 0.6);
  --overlay-light: rgba(0, 0, 0, 0.3);
  --overlay-subtle: rgba(0, 0, 0, 0.1);
  --overlay-medium: rgba(0, 0, 0, 0.2);
  
  /* White overlay */
  --overlay-white: rgba(255, 255, 255, 0.5);
  
  /* Shadow variations */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 80px rgba(0, 0, 0, 0.3);
  
  /* Colored shadows */
  --shadow-primary: 0 4px 12px rgba(249, 216, 120, 0.3);
  --shadow-primary-hover: 0 3px 10px rgba(249, 216, 120, 0.25);
  --shadow-secondary: 0 4px 12px rgba(255, 140, 0, 0.3);
  
  /* === BORDER COLORS === */
  /* Various border colors used throughout */
  --border-light: #f3f3f3;           /* Light borders */
  --border-medium: #e2e8f0;          /* Medium borders */
  --border-gray: #e9ecef;             /* Gray borders */
  --border-dark: #dee2e6;             /* Darker borders */
  
  /* === LOADING & SPINNER COLORS === */
  /* Loading indicators */
  --spinner-primary: #fcd769;         /* Primary spinner */
  --spinner-border: #f3f3f3;          /* Spinner border */
}

/* === SEMANTIC COLOR ALIASES === */
:root {
  /* Common semantic names for easier usage */
  --color-brand: var(--primary-color);
  --color-accent: var(--secondary-color);
  --color-text: var(--text-primary);
  --color-muted: var(--text-muted);
  --color-background: var(--bg-primary);
  --color-surface: var(--bg-secondary);
  --color-border: var(--border-medium);
  --color-success: var(--success-color);
  --color-error: var(--error-color);
  --color-warning: var(--warning-color);
  --color-info: var(--info-color);
}

/* === DARK MODE PREPARATION === */
/* Future dark mode variables (commented out for now) */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --border-medium: #404040;
  }
}
*/

/* === GLOBAL TYPOGRAPHY === */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}