/*
 * Base Design Tokens
 * These are the default values. Each tenant overrides these in their own tokens.css
 */

:root {
  /* ==========================================================================
     Primary Colors - Vibrant Blue
     ========================================================================== */
  --color-primary: #256cef; /* Vibrant blue - Professional, modern */
  --color-primary-hover: #4a85f6; /* Lighter blue on hover */
  --color-primary-active: #1a5ad2; /* Darker blue active */
  --color-primary-foreground: #ffffff;

  /* ==========================================================================
     Secondary Colors - Warm Yellow
     ========================================================================== */
  --color-secondary: #f59e0b; /* Amber 500 - Warm contrast */
  --color-secondary-hover: #fbbf24; /* Amber 400 */
  --color-secondary-active: #d97706; /* Amber 600 */
  --color-secondary-foreground: #ffffff;

  /* ==========================================================================
     Accent Colors - Light Blue Tint
     ========================================================================== */
  --color-accent: #f0f9ff; /* Sky 50 - Very light blue for subtle selection */
  --color-accent-hover: #e0f2fe; /* Sky 100 - Slightly darker on hover */
  --color-accent-active: #bae6fd; /* Sky 200 */
  --color-accent-foreground: #0c4a6e; /* Sky 900 - Darker blue for high contrast */

  /* ==========================================================================
     Destructive Colors - Professional Red
     ========================================================================== */
  --color-destructive: #ef4444; /* Red 500 - Clear danger */
  --color-destructive-hover: #f87171; /* Red 400 */
  --color-destructive-active: #dc2626; /* Red 600 */
  --color-destructive-foreground: #ffffff;

  /* ==========================================================================
     Base/Neutral Colors - Premium Grays and Blacks
     ========================================================================== */
  --color-background: #fafafa; /* Gray 50 - Soft light background */
  --color-foreground: #111827; /* Gray 900 - Deep black text */

  --color-card: #ffffff;
  --color-card-foreground: #1f2937; /* Gray 800 */

  --color-popover: #ffffff;
  --color-popover-foreground: #111827;

  --color-muted: #f3f4f6; /* Gray 100 - Light gray */
  --color-muted-hover: #e5e7eb; /* Gray 200 */
  --color-muted-foreground: #6b7280; /* Gray 500 - Mid gray */

  /* ==========================================================================
     Border and Input Colors - Refined Edges
     ========================================================================== */
  --color-border: #e5e7eb; /* Gray 200 - Subtle definition */
  --color-input: #e5e7eb; /* Gray 200 */
  --color-input-hover: #d1d5db; /* Gray 300 */
  --color-ring: #256cef; /* Primary blue */

  /* Generic hover state */
  --color-hover: #f3f4f6; /* Gray 100 - for general hover states */

  /* ==========================================================================
     Semantic Colors - Rich Professional Palette
     ========================================================================== */
  --color-success: #10b981; /* Green 500 - Positive feedback */
  --color-success-foreground: #ffffff;

  --color-warning: #f59e0b; /* Amber 500 - Attention needed */
  --color-warning-foreground: #ffffff;

  --color-error: #ef4444; /* Red 500 - Critical issues */
  --color-error-foreground: #ffffff;

  --color-info: #256cef; /* Primary Blue - Informational */
  --color-info-foreground: #ffffff;

  /* ==========================================================================
     Additional Accent Colors - Extended Palette
     ========================================================================== */
  --color-tertiary: #10b981; /* Green 500 - Success tone */
  --color-tertiary-hover: #34d399; /* Green 400 */
  --color-tertiary-foreground: #ffffff;

  --color-quaternary: #9ca3af; /* Gray 400 - Neutral tone */
  --color-quaternary-hover: #d1d5db; /* Gray 300 */
  --color-quaternary-foreground: #111827;

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-family-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ==========================================================================
     Spacing & Sizing
     ========================================================================== */
  --header-height: 4rem;
  --sidebar-width: 16rem;
  --container-max-width: 80rem;

  /* ==========================================================================
     Borders & Shadows
     ========================================================================== */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Default shadows (gray/neutral) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Primary colored shadows - Blue */
  --shadow-sm-primary: 0 1px 2px 0 rgb(37 108 239 / 0.1);
  --shadow-md-primary:
    0 4px 6px -1px rgb(37 108 239 / 0.15), 0 2px 4px -2px rgb(37 108 239 / 0.1);
  --shadow-lg-primary:
    0 10px 15px -3px rgb(37 108 239 / 0.2),
    0 4px 6px -4px rgb(37 108 239 / 0.15);
  --shadow-xl-primary:
    0 20px 25px -5px rgb(37 108 239 / 0.25),
    0 8px 10px -6px rgb(37 108 239 / 0.2);

  /* Secondary colored shadows - Yellow/Amber */
  --shadow-sm-secondary: 0 1px 2px 0 rgb(245 158 11 / 0.1);
  --shadow-md-secondary:
    0 4px 6px -1px rgb(245 158 11 / 0.15), 0 2px 4px -2px rgb(245 158 11 / 0.1);
  --shadow-lg-secondary:
    0 10px 15px -3px rgb(245 158 11 / 0.2),
    0 4px 6px -4px rgb(245 158 11 / 0.15);
  --shadow-xl-secondary:
    0 20px 25px -5px rgb(245 158 11 / 0.25),
    0 8px 10px -6px rgb(245 158 11 / 0.2);

  /* Accent colored shadows (subtle) */
  --shadow-sm-accent: 0 1px 2px 0 rgb(241 245 249 / 0.5);
  --shadow-md-accent:
    0 4px 6px -1px rgb(241 245 249 / 0.6), 0 2px 4px -2px rgb(241 245 249 / 0.4);
  --shadow-lg-accent:
    0 10px 15px -3px rgb(241 245 249 / 0.7),
    0 4px 6px -4px rgb(241 245 249 / 0.5);
  --shadow-xl-accent:
    0 20px 25px -5px rgb(241 245 249 / 0.8),
    0 8px 10px -6px rgb(241 245 249 / 0.6);

  /* Danger/red colored shadows */
  --shadow-sm-danger: 0 1px 2px 0 rgb(239 68 68 / 0.15);
  --shadow-md-danger:
    0 4px 6px -1px rgb(239 68 68 / 0.2), 0 2px 4px -2px rgb(239 68 68 / 0.15);
  --shadow-lg-danger:
    0 10px 15px -3px rgb(239 68 68 / 0.25), 0 4px 6px -4px rgb(239 68 68 / 0.2);
  --shadow-xl-danger:
    0 20px 25px -5px rgb(239 68 68 / 0.3), 0 8px 10px -6px rgb(239 68 68 / 0.25);

  /* Success/green colored shadows */
  --shadow-sm-success: 0 1px 2px 0 rgb(16 185 129 / 0.1);
  --shadow-md-success:
    0 4px 6px -1px rgb(16 185 129 / 0.15), 0 2px 4px -2px rgb(16 185 129 / 0.1);
  --shadow-lg-success:
    0 10px 15px -3px rgb(16 185 129 / 0.2),
    0 4px 6px -4px rgb(16 185 129 / 0.15);
  --shadow-xl-success:
    0 20px 25px -5px rgb(16 185 129 / 0.25),
    0 8px 10px -6px rgb(16 185 129 / 0.2);
}