/* Consolidated Color Scheme for ShareShop Application */
/* This file contains all color variables used throughout the application */
/* Using CSS variable names for better maintainability and consistency */

:root {
  /* Main color scheme from main.css */
  --primary-blue: #4C9AFF;
  --background: #121212;
  --surface: #1E1E1E;
  --surface-light: #2D2D2D;
  --text-primary: #FFFFFF;
  --text-secondary: #E0E0E0;
  --text-disabled: #9E9E9E;
  --border-color: #424242;
  --success: #4CAF50;
  --warning: #FFC107;
  --error: #F44336;
  --modal-bg: #1E1E1E;
  --modal-header-bg: #2D2D2D;
  --modal-border: #424242;
  
  /* Form colors from forms.css */
  --input-background: rgba(57, 63, 84, 0.8);
  --input-text-inactive: #7881A1;
  --input-text-active: #BFD2FF;
  --brand-primary: #1A5FB4;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  
  /* Modal colors from modals.css */
  --neumorphic-bg: #2c2c2c;
  --neumorphic-card-bg: #2c2c2c;
  --neumorphic-shadow-light: #383838;
  --neumorphic-shadow-dark: #1a1a1a;
  --brand-secondary: #8c8c8c;
  
  /* Aurora colors from animated-text.css */
  --clr-1: #00c2ff;
  --clr-2: #33ff8c;
  --clr-3: #ffc640;
  --clr-4: #e54cff;
  --blur: 1rem;
  
  /* Gradient colors from buttons-full.css */
  --btn-primary-start: #8f94fb;
  --btn-primary-end: #4e54c8;
  --btn-secondary-start: #348AC7;
  --btn-secondary-end: #7474BF;
  --btn-danger-start: #fc6767;
  --btn-danger-end: #ec008c;
  --btn-success-start: #a8e063;
  --btn-success-end: #56ab2f;
  
  /* Additional colors from budget-progress.css */
  --progress-spent-start: #3b82f6;
  --progress-spent-end: #2563eb;
  --progress-collected-start: #22c55e;
  --progress-collected-end: #16a34a;
  --progress-remaining-start: #4b4b4b;
  --progress-remaining-end: #333333;
  
  /* Additional colors from tables.css */
  --table-hover: rgba(78, 84, 200, 0.1);
  --quantity-bought: #56ab2f;
  
  /* New design system colors - based on the new design tokens */
  /* Neutral colors - dark slate for sophisticated dark theme */
  --color-neutral-1: #111111;
  --color-neutral-2: #191919;
  --color-neutral-3: #222222;
  --color-neutral-4: #2a2a2a;
  --color-neutral-5: #313131;
  --color-neutral-6: #3a3a3a;
  --color-neutral-7: #484848;
  --color-neutral-8: #606060;
  --color-neutral-9: #6e6e6e;
  --color-neutral-10: #7b7b7b;
  --color-neutral-11: #b4b4b4;
  --color-neutral-12: #eeeeee;
  --color-neutral-contrast: #fff;
  
  /* Accent colors - indigo for primary actions */
  --color-accent-1: #18111b;
  --color-accent-2: #1e1523;
  --color-accent-3: #2f1c3b;
  --color-accent-4: #3d224e;
  --color-accent-5: #48295c;
  --color-accent-6: #54346b;
  --color-accent-7: #664282;
  --color-accent-8: #8357aa;
  --color-accent-9: #8e4ec6;
  --color-accent-10: #9a5cd0;
  --color-accent-11: #d59cff;
  --color-accent-12: #ecd9fa;
  --color-accent-contrast: #fff;
  
  /* Error colors */
  --color-error-1: #191111;
  --color-error-2: #201314;
  --color-error-3: #3b1219;
  --color-error-4: #500e1c;
  --color-error-5: #611623;
  --color-error-6: #73232d;
  --color-error-7: #8c333a;
  --color-error-8: #b54548;
  --color-error-9: #e5484d;
  --color-error-10: #ec5e5e;
  --color-error-11: #ff8a88;
  --color-error-12: #ffd1d9;
  --color-error-contrast: #fff;
  
  /* Success colors */
  --color-success-1: #111210;
  --color-success-2: #171918;
  --color-success-3: #202221;
  --color-success-4: #272a28;
  --color-success-5: #2e3130;
  --color-success-6: #373b39;
  --color-success-7: #444947;
  --color-success-8: #5b625f;
  --color-success-9: #63706b;
  --color-success-10: #717d79;
  --color-success-11: #adb5b2;
  --color-success-12: #eceeed;
  --color-success-contrast: #fff;
  
  /* Warning colors for pending items */
  --color-warning-1: #121210;
  --color-warning-2: #191918;
  --color-warning-3: #222221;
  --color-warning-4: #2a2a28;
  --color-warning-5: #31312e;
  --color-warning-6: #3b3a37;
  --color-warning-7: #494844;
  --color-warning-8: #62605a;
  --color-warning-9: #6f6d66;
  --color-warning-10: #7d7b74;
  --color-warning-11: #b5b3ad;
  --color-warning-12: #eeeeec;
  --color-warning-contrast: #fff;
  
  /* Spacing tokens */
  --space-0: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  
  /* Radius tokens */
  --radius-1: 0.125rem;
  --radius-2: 0.25rem;
  --radius-3: 0.5rem;
  --radius-4: 0.75rem;
  --radius-round: 50%;
  
  /* Shadow tokens */
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Font tokens */
  --font-size-00: clamp(0.45rem, 1vw, 0.5rem);
  --font-size-0: clamp(0.65rem, 1.5vw, 0.75rem);
  --font-size-1: clamp(0.85rem, 2vw, 1rem);
  --font-size-2: clamp(0.95rem, 2.2vw, 1.1rem);
  --font-size-3: clamp(1.1rem, 2.5vw, 1.25rem);
  --font-size-4: clamp(1.3rem, 3vw, 1.5rem);
  --font-size-5: clamp(1.7rem, 4vw, 2rem);
  --font-size-6: clamp(2.1rem, 5vw, 2.5rem);
  --font-size-7: clamp(2.6rem, 6vw, 3rem);
  --font-size-8: clamp(3.1rem, 7vw, 3.5rem);
  
  --font-size-fluid-0: max(0.75rem, min(2vw, 1rem));
  --font-size-fluid-1: max(1rem, min(4vw, 1.5rem));
  --font-size-fluid-2: max(1.5rem, min(6vw, 2.5rem));
  --font-size-fluid-3: max(2rem, min(9vw, 3.5rem));
  
  --font-system-ui: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
  --font-monospace-code: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
  
  /* Font family tokens */
  --font-heading: var(--font-system-ui);
  --font-body: var(--font-system-ui);
  --font-caption: var(--font-system-ui);
  --font-subheading: var(--font-system-ui);
  
  /* Transition tokens */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme specific variables */
[data-theme="dark"] {
  --background: #121212;
  --surface: #1E1E1E;
  --surface-light: #2D2D2D;
  --text-primary: #FFFFFF;
  --text-secondary: #E0E0E0;
  --text-disabled: #9E9E9E;
  --border-color: #424242;
}

/* Responsive typography adjustments */
@media (max-width: 575.98px) {
  :root {
    --font-size-00: 0.45rem;
    --font-size-0: 0.65rem;
    --font-size-1: 0.85rem;
    --font-size-2: 0.95rem;
    --font-size-3: 1.1rem;
    --font-size-4: 1.3rem;
    --font-size-5: 1.7rem;
    --font-size-6: 2.1rem;
    --font-size-7: 2.6rem;
    --font-size-8: 3.1rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    --font-size-00: 0.48rem;
    --font-size-0: 0.7rem;
    --font-size-1: 0.9rem;
    --font-size-2: 1rem;
    --font-size-3: 1.15rem;
    --font-size-4: 1.4rem;
    --font-size-5: 1.8rem;
    --font-size-6: 2.2rem;
    --font-size-7: 2.7rem;
    --font-size-8: 3.2rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --font-size-00: 0.5rem;
    --font-size-0: 0.75rem;
    --font-size-1: 1rem;
    --font-size-2: 1.1rem;
    --font-size-3: 1.25rem;
    --font-size-4: 1.5rem;
    --font-size-5: 2rem;
    --font-size-6: 2.5rem;
    --font-size-7: 3rem;
    --font-size-8: 3.5rem;
  }
}

@media (min-width: 992px) {
  :root {
    --font-size-00: 0.5rem;
    --font-size-0: 0.75rem;
    --font-size-1: 1rem;
    --font-size-2: 1.1rem;
    --font-size-3: 1.25rem;
    --font-size-4: 1.5rem;
    --font-size-5: 2rem;
    --font-size-6: 2.5rem;
    --font-size-7: 3rem;
    --font-size-8: 3.5rem;
  }
}