/**
 * Secure-UI Design Tokens
 *
 * These CSS Custom Properties can be overridden at any level:
 * - :root level (global)
 * - Per-component level (secure-input { --var: value; })
 * - Per-instance level (style attribute or class)
 *
 * Architecture: Design Tokens → Component Styles → User Overrides
 */

:host,
:root {
  /* ============================================
     COLOR SYSTEM
     ============================================ */

  /* Security Tier Colors */
  --secure-ui-tier-public: #e0e0e0;
  --secure-ui-tier-authenticated: #2196F3;
  --secure-ui-tier-sensitive: #FF9800;
  --secure-ui-tier-critical: #F44336;

  /* Semantic Colors */
  --secure-ui-color-primary: #667eea;
  --secure-ui-color-success: #10b981;
  --secure-ui-color-warning: #f59e0b;
  --secure-ui-color-error: #ef4444;
  --secure-ui-color-info: #3b82f6;

  /* Neutral Colors */
  --secure-ui-color-text-primary: #1f2937;
  --secure-ui-color-text-secondary: #6b7280;
  --secure-ui-color-text-disabled: #9ca3af;
  --secure-ui-color-text-inverse: #ffffff;

  --secure-ui-color-bg-primary: #ffffff;
  --secure-ui-color-bg-secondary: #f9fafb;
  --secure-ui-color-bg-tertiary: #f3f4f6;
  --secure-ui-color-bg-disabled: #e5e7eb;

  --secure-ui-color-border: #d1d5db;
  --secure-ui-color-border-hover: #9ca3af;
  --secure-ui-color-border-focus: #3b82f6;

  /* ============================================
     SPACING SYSTEM
     ============================================ */

  --secure-ui-space-0: 0;
  --secure-ui-space-1: 0.25rem;   /* 4px */
  --secure-ui-space-2: 0.5rem;    /* 8px */
  --secure-ui-space-3: 0.75rem;   /* 12px */
  --secure-ui-space-4: 1rem;      /* 16px */
  --secure-ui-space-5: 1.25rem;   /* 20px */
  --secure-ui-space-6: 1.5rem;    /* 24px */
  --secure-ui-space-8: 2rem;      /* 32px */
  --secure-ui-space-10: 2.5rem;   /* 40px */
  --secure-ui-space-12: 3rem;     /* 48px */

  /* ============================================
     TYPOGRAPHY SYSTEM
     ============================================ */

  /* Font Families */
  --secure-ui-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --secure-ui-font-family-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;

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

  /* Font Weights */
  --secure-ui-font-weight-normal: 400;
  --secure-ui-font-weight-medium: 500;
  --secure-ui-font-weight-semibold: 600;
  --secure-ui-font-weight-bold: 700;

  /* Line Heights */
  --secure-ui-line-height-tight: 1.25;
  --secure-ui-line-height-normal: 1.5;
  --secure-ui-line-height-relaxed: 1.75;

  /* ============================================
     BORDER SYSTEM
     ============================================ */

  --secure-ui-border-width-thin: 1px;
  --secure-ui-border-width-base: 2px;
  --secure-ui-border-width-thick: 4px;

  --secure-ui-border-radius-none: 0;
  --secure-ui-border-radius-sm: 0.25rem;   /* 4px */
  --secure-ui-border-radius-base: 0.375rem; /* 6px */
  --secure-ui-border-radius-md: 0.5rem;    /* 8px */
  --secure-ui-border-radius-lg: 0.75rem;   /* 12px */
  --secure-ui-border-radius-xl: 1rem;      /* 16px */
  --secure-ui-border-radius-full: 9999px;

  /* ============================================
     SHADOW SYSTEM
     ============================================ */

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

  --secure-ui-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.1);
  --secure-ui-shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.1);

  /* ============================================
     TRANSITION SYSTEM
     ============================================ */

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

  --secure-ui-transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --secure-ui-transition-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --secure-ui-transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

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

  /* Input Components */
  --secure-ui-input-height: 2.5rem;        /* 40px */
  --secure-ui-input-padding-x: var(--secure-ui-space-3);
  --secure-ui-input-padding-y: var(--secure-ui-space-2);
  --secure-ui-input-font-size: var(--secure-ui-font-size-sm);
  --secure-ui-input-border-width: var(--secure-ui-border-width-base);
  --secure-ui-input-border-radius: var(--secure-ui-border-radius-base);
  --secure-ui-input-bg: var(--secure-ui-color-bg-primary);
  --secure-ui-input-border-color: var(--secure-ui-color-border);
  --secure-ui-input-border-color-hover: var(--secure-ui-color-border-hover);
  --secure-ui-input-border-color-focus: var(--secure-ui-color-border-focus);
  --secure-ui-input-text-color: var(--secure-ui-color-text-primary);
  --secure-ui-input-placeholder-color: var(--secure-ui-color-text-secondary);
  --secure-ui-input-disabled-bg: var(--secure-ui-color-bg-disabled);
  --secure-ui-input-disabled-opacity: 0.6;

  /* Textarea Components */
  --secure-ui-textarea-min-height: 5rem;   /* 80px */
  --secure-ui-textarea-padding: var(--secure-ui-space-2) var(--secure-ui-space-3);

  /* Select Components */
  --secure-ui-select-height: var(--secure-ui-input-height);
  --secure-ui-select-padding: var(--secure-ui-input-padding-y) var(--secure-ui-input-padding-x);
  --secure-ui-select-background-color: var(--secure-ui-input-bg);
  --secure-ui-select-color: var(--secure-ui-input-text-color);

  /* Button Components */
  --secure-ui-button-height: var(--secure-ui-input-height);
  --secure-ui-button-padding-x: var(--secure-ui-space-4);
  --secure-ui-button-padding-y: var(--secure-ui-space-2);
  --secure-ui-button-border-radius: var(--secure-ui-border-radius-base);
  --secure-ui-button-font-weight: var(--secure-ui-font-weight-medium);

  /* Form Components */
  --secure-ui-form-gap: var(--secure-ui-space-4);
  --secure-ui-form-label-margin-bottom: var(--secure-ui-space-1);
  --secure-ui-form-error-margin-top: 0;  /*var(--secure-ui-space-1)*/

  /* File Upload Components */
  --secure-ui-upload-border-style: dashed;
  --secure-ui-upload-border-width: var(--secure-ui-border-width-base);
  --secure-ui-upload-padding: var(--secure-ui-space-8);
  --secure-ui-upload-border-radius: var(--secure-ui-border-radius-lg);

  /* table component */
   --secure-ui-table-header-bg: var(--secure-ui-color-bg-secondary); 
   --secure-ui-table-row-hover-bg: var(--secure-ui-color-bg-tertiary);
   --secure-ui-table-border-color: var(--secure-ui-color-border);
   --secure-ui-table-font-size: var(--secure-ui-font-size-sm);
   --secure-ui-table-font-color: var(--secure-ui-color-text-primary);
   --secure-ui-table-padding: var(--secure-ui-space-3);
   --secure-ui-table-border-radius: var(--secure-ui-border-radius-md);
   --secure-ui-td-padding: var(--secure-ui-space-3);
   --secure-ui-th-padding: var(--secure-ui-space-3);
   --secure-ui-table-cell-text-align: left;

  /* Badge Components */
  --secure-ui-badge-padding: var(--secure-ui-space-1) var(--secure-ui-space-2);
  --secure-ui-badge-font-size: var(--secure-ui-font-size-xs);
  --secure-ui-badge-border-radius: var(--secure-ui-border-radius-sm);

  /* Label Components */
  --secure-ui-label-font-size: var(--secure-ui-font-size-sm);
  --secure-ui-label-font-weight: var(--secure-ui-font-weight-medium);
  --secure-ui-label-color: var(--secure-ui-color-text-primary);

  /* Error Message Components */
  --error-display: block;
  --secure-ui-error-font-size: var(--secure-ui-font-size-xs);
  --secure-ui-error-color: var(--secure-ui-color-error);

  /* ============================================
     Z-INDEX SYSTEM
     ============================================ */

  --secure-ui-z-base: 0;
  --secure-ui-z-dropdown: 1000;
  --secure-ui-z-sticky: 1100;
  --secure-ui-z-fixed: 1200;
  --secure-ui-z-modal-backdrop: 1300;
  --secure-ui-z-modal: 1400;
  --secure-ui-z-popover: 1500;
  --secure-ui-z-tooltip: 1600;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  :host,
  :root {
    /* Override colors for dark mode */
    --secure-ui-color-text-primary: #f9fafb;
    --secure-ui-color-text-secondary: #d1d5db;
    --secure-ui-color-text-disabled: #6b7280;

    --secure-ui-color-bg-primary: #1f2937;
    --secure-ui-color-bg-secondary: #111827;
    --secure-ui-color-bg-tertiary: #374151;
    --secure-ui-color-bg-disabled: #4b5563;

    --secure-ui-color-border: #4b5563;
    --secure-ui-color-border-hover: #6b7280;
    --secure-ui-color-border-focus: #60a5fa;

    --secure-ui-input-bg: #1f2937;
    --secure-ui-input-disabled-bg: #4b5563;
  }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  :host,
  :root {
    --secure-ui-transition-fast: 0ms;
    --secure-ui-transition-base: 0ms;
    --secure-ui-transition-slow: 0ms;
  }
}