/**
 * Design System Variables
 *
 * This file contains all CSS custom properties (variables) used across the ToolStash network.
 * Sites can override these variables to customize their branding while maintaining consistency.
 *
 * Usage:
 * 1. Include this file: <link rel="stylesheet" href="/shared/styles/variables.css">
 * 2. Override in site-specific CSS: :root { --color-primary: #YOUR_COLOR; }
 */

:root {
  /* ========================================
     BRAND COLORS
     Override these for site-specific theming
     ======================================== */

  /* Primary color - main brand color */
  --color-primary: #4F46E5;        /* Indigo-600 */
  --color-primary-dark: #4338CA;   /* Indigo-700 */
  --color-primary-light: #6366F1;  /* Indigo-500 */
  --color-primary-bg: #EEF2FF;     /* Indigo-50 */
  --color-primary-alpha-10: rgba(79, 70, 229, 0.1);

  /* Secondary colors */
  --color-secondary: #3B82F6;      /* Blue-500 */
  --color-secondary-dark: #2563EB; /* Blue-600 */
  --color-accent: #818CF8;         /* Indigo-400 */


  /* ========================================
     SEMANTIC COLORS
     Used for status messages and feedback
     ======================================== */

  --color-success: #10B981;        /* Green-500 */
  --color-success-bg: #D1FAE5;     /* Green-100 */

  --color-warning: #F59E0B;        /* Amber-500 */
  --color-warning-bg: #FEF3C7;     /* Amber-100 */

  --color-danger: #EF4444;         /* Red-500 */
  --color-danger-bg: #FEE2E2;      /* Red-100 */

  --color-info: #3B82F6;           /* Blue-500 */
  --color-info-bg: #DBEAFE;        /* Blue-100 */


  /* ========================================
     NEUTRAL COLORS
     Base colors for text, backgrounds, borders
     ======================================== */

  --color-text: #1E293B;           /* Slate-800 */
  --color-text-muted: #64748B;     /* Slate-500 */

  --color-bg: #FFFFFF;             /* White */
  --color-bg-alt: #F8FAFC;         /* Slate-50 */

  --color-border: #E2E8F0;         /* Slate-200 */


  /* ========================================
     GRAY SCALE
     For backgrounds, disabled states, etc.
     ======================================== */

  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-600: #4B5563;
  --color-gray-900: #111827;


  /* ========================================
     SHADOWS
     Elevation levels for depth
     ======================================== */

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);


  /* ========================================
     BORDER RADIUS
     Consistent rounding across components
     ======================================== */

  --radius-sm: 0.375rem;  /* 6px */
  --radius: 0.5rem;       /* 8px - default */
  --radius-lg: 0.75rem;   /* 12px */


  /* ========================================
     SPACING
     Consistent spacing scale
     ======================================== */

  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */


  /* ========================================
     TYPOGRAPHY
     Font sizes and weights
     ======================================== */

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;


  /* ========================================
     Z-INDEX SCALE
     Layer management
     ======================================== */

  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-modal: 100;
  --z-tooltip: 200;


  /* ========================================
     TRANSITIONS
     Animation durations and easing
     ======================================== */

  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}


/* ========================================
   SITE-SPECIFIC COLOR OVERRIDES
   Example implementations for each site
   ======================================== */

/*
CodeUtils (Blue):
:root {
  --color-primary: #3B82F6;
  --color-primary-dark: #2563EB;
  --color-primary-light: #60A5FA;
  --color-primary-bg: #DBEAFE;
  --color-primary-alpha-10: rgba(59, 130, 246, 0.1);
}

CSSMagic (Purple):
:root {
  --color-primary: #8B5CF6;
  --color-primary-dark: #7C3AED;
  --color-primary-light: #A78BFA;
  --color-primary-bg: #EDE9FE;
  --color-primary-alpha-10: rgba(139, 92, 246, 0.1);
}

Math-Ease (Orange/Amber):
:root {
  --color-primary: #F59E0B;
  --color-primary-dark: #D97706;
  --color-primary-light: #FBBF24;
  --color-primary-bg: #FEF3C7;
  --color-primary-alpha-10: rgba(245, 158, 11, 0.1);
}

PDFQuick (Red):
:root {
  --color-primary: #EF4444;
  --color-primary-dark: #DC2626;
  --color-primary-light: #F87171;
  --color-primary-bg: #FEE2E2;
  --color-primary-alpha-10: rgba(239, 68, 68, 0.1);
}

TextToolBox (Green):
:root {
  --color-primary: #10B981;
  --color-primary-dark: #059669;
  --color-primary-light: #34D399;
  --color-primary-bg: #D1FAE5;
  --color-primary-alpha-10: rgba(16, 185, 129, 0.1);
}
*/