/**
 * Structra Design Tokens
 * ======================
 *
 * This file defines all CSS custom properties (design tokens) for the Structra design system.
 * These tokens provide a single source of truth for colors, typography, spacing, and other
 * visual properties across the application.
 *
 * Usage:
 * - Reference tokens using var(--structra-{category}-{property})
 * - Override tokens in tenant-specific CSS for white-labeling
 * - All Syncfusion component customizations flow through these tokens
 *
 * Categories:
 * - Colors (primary, secondary, semantic, neutral)
 * - Typography (font families, sizes, weights, line heights)
 * - Spacing (consistent spacing scale)
 * - Layout (breakpoints, container widths, z-index)
 * - Effects (shadows, borders, transitions)
 */

:root {
    /* ==========================================================================
       COLOR TOKENS - Primary Palette
       ========================================================================== */

    /* Primary Slate - Industrial steel gray for professional, engineering feel */
    --structra-primary-50: #f8fafc;
    --structra-primary-100: #f1f5f9;
    --structra-primary-200: #e2e8f0;
    --structra-primary-300: #cbd5e1;
    --structra-primary-400: #94a3b8;
    --structra-primary-500: #64748b;
    --structra-primary-600: #475569;
    --structra-primary-700: #334155;
    --structra-primary-800: #1e293b;
    --structra-primary-900: #0f172a;

    /* Secondary Cool Gray - Complementary industrial tone */
    --structra-secondary-50: #f9fafb;
    --structra-secondary-100: #f3f4f6;
    --structra-secondary-200: #e5e7eb;
    --structra-secondary-300: #d1d5db;
    --structra-secondary-400: #9ca3af;
    --structra-secondary-500: #6b7280;
    --structra-secondary-600: #4b5563;
    --structra-secondary-700: #374151;
    --structra-secondary-800: #1f2937;
    --structra-secondary-900: #111827;

    /* Accent Safety Orange - Construction/industrial CTA color */
    --structra-accent-50: #fff7ed;
    --structra-accent-100: #ffedd5;
    --structra-accent-200: #fed7aa;
    --structra-accent-300: #fdba74;
    --structra-accent-400: #fb923c;
    --structra-accent-500: #f97316;
    --structra-accent-600: #ea580c;
    --structra-accent-700: #c2410c;
    --structra-accent-800: #9a3412;
    --structra-accent-900: #7c2d12;

    /* ==========================================================================
       COLOR TOKENS - Semantic Colors
       ========================================================================== */

    /* Success - Completed, approved, active states */
    --structra-success-light: #d1fae5;
    --structra-success: #10b981;
    --structra-success-dark: #059669;

    /* Warning - Attention needed, pending review */
    --structra-warning-light: #fef3c7;
    --structra-warning: #f59e0b;
    --structra-warning-dark: #d97706;

    /* Error - Failed, rejected, critical issues */
    --structra-error-light: #fee2e2;
    --structra-error: #ef4444;
    --structra-error-dark: #dc2626;

    /* Info - Informational messages, tips */
    --structra-info-light: #dbeafe;
    --structra-info: #3b82f6;
    --structra-info-dark: #2563eb;

    /* ==========================================================================
       COLOR TOKENS - Neutral Palette (Light Mode)
       ========================================================================== */

    --structra-neutral-0: #ffffff;
    --structra-neutral-50: #f9fafb;
    --structra-neutral-100: #f3f4f6;
    --structra-neutral-200: #e5e7eb;
    --structra-neutral-300: #d1d5db;
    --structra-neutral-400: #9ca3af;
    --structra-neutral-500: #6b7280;
    --structra-neutral-600: #4b5563;
    --structra-neutral-700: #374151;
    --structra-neutral-800: #1f2937;
    --structra-neutral-900: #111827;
    --structra-neutral-950: #030712;

    /* ==========================================================================
       COLOR TOKENS - Applied Colors (Theme-Aware)
       ========================================================================== */

    /* Background hierarchy */
    --structra-bg-body: var(--structra-neutral-100);
    --structra-bg-surface: var(--structra-neutral-0);
    --structra-bg-surface-raised: var(--structra-neutral-0);
    --structra-bg-surface-overlay: var(--structra-neutral-0);
    --structra-bg-muted: var(--structra-neutral-50);
    --structra-bg-subtle: var(--structra-neutral-100);

    /* Text hierarchy */
    --structra-text-primary: var(--structra-neutral-900);
    --structra-text-secondary: var(--structra-neutral-600);
    --structra-text-tertiary: var(--structra-neutral-500);
    --structra-text-disabled: var(--structra-neutral-400);
    --structra-text-inverse: var(--structra-neutral-0);
    --structra-text-link: var(--structra-accent-600);
    --structra-text-link-hover: var(--structra-accent-700);

    /* Border colors */
    --structra-border-default: var(--structra-neutral-200);
    --structra-border-subtle: var(--structra-neutral-100);
    --structra-border-strong: var(--structra-neutral-300);
    --structra-border-focus: var(--structra-accent-500);

    /* Interactive states */
    --structra-interactive-hover: rgba(0, 0, 0, 0.04);
    --structra-interactive-active: rgba(0, 0, 0, 0.08);
    --structra-interactive-selected: var(--structra-accent-50);

    /* ==========================================================================
       TYPOGRAPHY TOKENS
       ========================================================================== */

    /* Font families */
    --structra-font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --structra-font-family-mono: 'Fira Code', 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', monospace;
    --structra-font-family-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Font sizes - following a modular scale (1.125 ratio) */
    --structra-font-size-2xs: 0.625rem;   /* 10px */
    --structra-font-size-xs: 0.75rem;     /* 12px */
    --structra-font-size-sm: 0.875rem;    /* 14px */
    --structra-font-size-base: 1rem;      /* 16px */
    --structra-font-size-lg: 1.125rem;    /* 18px */
    --structra-font-size-xl: 1.25rem;     /* 20px */
    --structra-font-size-2xl: 1.5rem;     /* 24px */
    --structra-font-size-3xl: 1.875rem;   /* 30px */
    --structra-font-size-4xl: 2.25rem;    /* 36px */
    --structra-font-size-5xl: 3rem;       /* 48px */

    /* Font weights */
    --structra-font-weight-light: 300;
    --structra-font-weight-regular: 400;
    --structra-font-weight-medium: 500;
    --structra-font-weight-semibold: 600;
    --structra-font-weight-bold: 700;

    /* Line heights */
    --structra-line-height-tight: 1.25;
    --structra-line-height-snug: 1.375;
    --structra-line-height-normal: 1.5;
    --structra-line-height-relaxed: 1.625;
    --structra-line-height-loose: 2;

    /* Letter spacing */
    --structra-letter-spacing-tighter: -0.05em;
    --structra-letter-spacing-tight: -0.025em;
    --structra-letter-spacing-normal: 0;
    --structra-letter-spacing-wide: 0.025em;
    --structra-letter-spacing-wider: 0.05em;
    --structra-letter-spacing-widest: 0.1em;

    /* ==========================================================================
       SPACING TOKENS
       ========================================================================== */

    /* Base spacing unit: 4px */
    --structra-spacing-0: 0;
    --structra-spacing-px: 1px;
    --structra-spacing-0-5: 0.125rem;  /* 2px */
    --structra-spacing-1: 0.25rem;     /* 4px */
    --structra-spacing-1-5: 0.375rem;  /* 6px */
    --structra-spacing-2: 0.5rem;      /* 8px */
    --structra-spacing-2-5: 0.625rem;  /* 10px */
    --structra-spacing-3: 0.75rem;     /* 12px */
    --structra-spacing-3-5: 0.875rem;  /* 14px */
    --structra-spacing-4: 1rem;        /* 16px */
    --structra-spacing-5: 1.25rem;     /* 20px */
    --structra-spacing-6: 1.5rem;      /* 24px */
    --structra-spacing-7: 1.75rem;     /* 28px */
    --structra-spacing-8: 2rem;        /* 32px */
    --structra-spacing-9: 2.25rem;     /* 36px */
    --structra-spacing-10: 2.5rem;     /* 40px */
    --structra-spacing-12: 3rem;       /* 48px */
    --structra-spacing-14: 3.5rem;     /* 56px */
    --structra-spacing-16: 4rem;       /* 64px */
    --structra-spacing-20: 5rem;       /* 80px */
    --structra-spacing-24: 6rem;       /* 96px */
    --structra-spacing-32: 8rem;       /* 128px */

    /* ==========================================================================
       LAYOUT TOKENS
       ========================================================================== */

    /* Container widths */
    --structra-container-sm: 640px;
    --structra-container-md: 768px;
    --structra-container-lg: 1024px;
    --structra-container-xl: 1280px;
    --structra-container-2xl: 1536px;

    /* Sidebar dimensions */
    --structra-sidebar-width: 280px;
    --structra-sidebar-width-collapsed: 64px;

    /* Header dimensions */
    --structra-header-height: 64px;

    /* Content area */
    --structra-content-max-width: 1440px;
    --structra-content-padding: var(--structra-spacing-6);

    /* Z-index layers */
    --structra-z-dropdown: 1000;
    --structra-z-sticky: 1020;
    --structra-z-fixed: 1030;
    --structra-z-sidebar: 1040;
    --structra-z-modal-backdrop: 1050;
    --structra-z-modal: 1060;
    --structra-z-popover: 1070;
    --structra-z-tooltip: 1080;
    --structra-z-toast: 1090;

    /* ==========================================================================
       EFFECT TOKENS - Borders
       ========================================================================== */

    /* Border widths */
    --structra-border-width-0: 0;
    --structra-border-width-1: 1px;
    --structra-border-width-2: 2px;
    --structra-border-width-4: 4px;

    /* Border radius */
    --structra-radius-none: 0;
    --structra-radius-sm: 0.25rem;   /* 4px */
    --structra-radius-base: 0.375rem; /* 6px */
    --structra-radius-md: 0.5rem;    /* 8px */
    --structra-radius-lg: 0.75rem;   /* 12px */
    --structra-radius-xl: 1rem;      /* 16px */
    --structra-radius-2xl: 1.5rem;   /* 24px */
    --structra-radius-full: 9999px;

    /* ==========================================================================
       EFFECT TOKENS - Shadows
       ========================================================================== */

    --structra-shadow-none: none;
    --structra-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --structra-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --structra-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --structra-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --structra-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --structra-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --structra-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Focus ring - using accent orange */
    --structra-focus-ring: 0 0 0 3px rgba(249, 115, 22, 0.4);
    --structra-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.4);

    /* ==========================================================================
       EFFECT TOKENS - Transitions
       ========================================================================== */

    /* Transition durations */
    --structra-duration-fastest: 50ms;
    --structra-duration-faster: 100ms;
    --structra-duration-fast: 150ms;
    --structra-duration-normal: 200ms;
    --structra-duration-slow: 300ms;
    --structra-duration-slower: 400ms;
    --structra-duration-slowest: 500ms;

    /* Easing functions */
    --structra-ease-linear: linear;
    --structra-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --structra-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --structra-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --structra-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Common transitions */
    --structra-transition-colors: color var(--structra-duration-fast) var(--structra-ease-in-out),
                                  background-color var(--structra-duration-fast) var(--structra-ease-in-out),
                                  border-color var(--structra-duration-fast) var(--structra-ease-in-out);
    --structra-transition-opacity: opacity var(--structra-duration-fast) var(--structra-ease-in-out);
    --structra-transition-transform: transform var(--structra-duration-fast) var(--structra-ease-in-out);
    --structra-transition-all: all var(--structra-duration-fast) var(--structra-ease-in-out);

    /* ==========================================================================
       COMPONENT-SPECIFIC TOKENS
       ========================================================================== */

    /* Button tokens */
    --structra-button-height-sm: 32px;
    --structra-button-height-md: 40px;
    --structra-button-height-lg: 48px;
    --structra-button-padding-x-sm: var(--structra-spacing-3);
    --structra-button-padding-x-md: var(--structra-spacing-4);
    --structra-button-padding-x-lg: var(--structra-spacing-6);

    /* Input tokens */
    --structra-input-height-sm: 32px;
    --structra-input-height-md: 40px;
    --structra-input-height-lg: 48px;
    --structra-input-padding-x: var(--structra-spacing-3);
    --structra-input-bg: var(--structra-neutral-0);
    --structra-input-border: var(--structra-border-default);
    --structra-input-border-focus: var(--structra-accent-500);
    --structra-input-placeholder: var(--structra-neutral-400);

    /* Card tokens */
    --structra-card-bg: var(--structra-bg-surface);
    --structra-card-border: var(--structra-border-default);
    --structra-card-shadow: var(--structra-shadow-sm);
    --structra-card-radius: var(--structra-radius-lg);
    --structra-card-padding: var(--structra-spacing-6);

    /* Dialog tokens */
    --structra-dialog-bg: var(--structra-bg-surface);
    --structra-dialog-shadow: var(--structra-shadow-xl);
    --structra-dialog-radius: var(--structra-radius-xl);
    --structra-dialog-backdrop: rgba(0, 0, 0, 0.5);

    /* Table/Grid tokens */
    --structra-table-header-bg: var(--structra-neutral-50);
    --structra-table-row-hover: var(--structra-interactive-hover);
    --structra-table-row-selected: var(--structra-interactive-selected);
    --structra-table-border: var(--structra-border-subtle);
}

/* ==========================================================================
   DARK MODE TOKENS
   ========================================================================== */

[data-theme="dark"],
.dark {
    /* Background hierarchy */
    --structra-bg-body: #0f172a;
    --structra-bg-surface: #1e293b;
    --structra-bg-surface-raised: #334155;
    --structra-bg-surface-overlay: #334155;
    --structra-bg-muted: #1e293b;
    --structra-bg-subtle: #334155;

    /* Text hierarchy - WCAG AA compliant contrast ratios */
    --structra-text-primary: #f1f5f9;       /* Contrast 12.6:1 against #1e293b */
    --structra-text-secondary: #cbd5e1;      /* Contrast 8.1:1 - improved from #94a3b8 */
    --structra-text-tertiary: #94a3b8;       /* Contrast 5.3:1 against #1e293b */
    --structra-text-disabled: #64748b;       /* Contrast 3.5:1 - acceptable for disabled */
    --structra-text-inverse: #0f172a;
    --structra-text-link: #fb923c;
    --structra-text-link-hover: #fdba74;

    /* Neutral palette overrides for dark mode text readability */
    --structra-neutral-100: #f1f5f9;
    --structra-neutral-200: #e2e8f0;
    --structra-neutral-300: #cbd5e1;
    --structra-neutral-400: #94a3b8;
    --structra-neutral-500: #64748b;

    /* Border colors */
    --structra-border-default: #475569;      /* Improved visibility */
    --structra-border-subtle: #334155;
    --structra-border-strong: #64748b;

    /* Interactive states */
    --structra-interactive-hover: rgba(255, 255, 255, 0.08);
    --structra-interactive-active: rgba(255, 255, 255, 0.12);
    --structra-interactive-selected: rgba(249, 115, 22, 0.2);

    /* Shadows for dark mode (more subtle) */
    --structra-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --structra-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --structra-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --structra-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --structra-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --structra-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

    /* Focus ring for dark mode - using accent orange */
    --structra-focus-ring: 0 0 0 3px rgba(251, 146, 60, 0.5);
    --structra-focus-ring-error: 0 0 0 3px rgba(248, 113, 113, 0.5);

    /* Input tokens */
    --structra-input-bg: #1e293b;
    --structra-input-border: #475569;
    --structra-input-border-focus: #fb923c;
    --structra-input-placeholder: #94a3b8;

    /* Card tokens */
    --structra-card-bg: #1e293b;
    --structra-card-border: #334155;
    --structra-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);

    /* Dialog tokens */
    --structra-dialog-bg: #1e293b;
    --structra-dialog-backdrop: rgba(0, 0, 0, 0.75);

    /* Table/Grid tokens */
    --structra-table-header-bg: #334155;
    --structra-table-border: #334155;
    --structra-table-row-hover: rgba(255, 255, 255, 0.05);

    /* Semantic colors - lighter variants for dark mode readability */
    --structra-success-light: rgba(16, 185, 129, 0.15);
    --structra-warning-light: rgba(245, 158, 11, 0.15);
    --structra-error-light: rgba(239, 68, 68, 0.15);
    --structra-info-light: rgba(59, 130, 246, 0.15);

    /* Badge colors for dark mode */
    --structra-badge-default-bg: #334155;
    --structra-badge-default-text: #e2e8f0;
}