/**
 * mikrofibraoptom Design System - Tokens & CSS Variables
 */

:root {
  /* Accent Colors */
  --uc-accent-mint: #e2f3e7;
  --uc-accent-mint-light: #f2faf4;
  --uc-accent-mint-dark: #b8e6c4;
  --uc-accent-mint-deep: #1e7040;

  --uc-accent-gray: #eaebeb;
  --uc-accent-gray-light: #f7f8f8;
  --uc-accent-gray-dark: #d2d5d5;

  /* Brand Colors */
  --uc-brand-dark: #28362e;
  --uc-brand-navy: #0f172a;
  --uc-brand-green: #23633d;
  --uc-brand-green-hover: #194a2d;

  /* Status & Feedback */
  --uc-status-info-bg: #f7f8f8;
  --uc-status-info-border: #d2d5d5;
  --uc-status-info-text: #28362e;
  --uc-status-info-accent: #28362e;

  --uc-status-success-bg: #f2faf4;
  --uc-status-success-border: #b8e6c4;
  --uc-status-success-text: #28362e;
  --uc-status-success-accent: #23633d;

  --uc-status-error-bg: #fef2f2;
  --uc-status-error-border: #fecaca;
  --uc-status-error-text: #991b1b;
  --uc-status-error-accent: #dc2626;
  --uc-status-error-hover: #b91c1c;

  /* Base & Surfaces */
  --uc-bg: #ffffff;
  --uc-surface: #f8faf9;
  --uc-surface-elevated: #ffffff;
  --uc-border: #e2e8f0;
  --uc-border-light: #edf2f7;
  --uc-border-focus: #23633d;

  /* Text Colors */
  --uc-text: #1e293b;
  --uc-text-secondary: #475569;
  --uc-text-muted: #64748b;
  --uc-text-light: #94a3b8;
  --uc-text-inverse: #ffffff;

  /* Typography */
  --uc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --uc-fz-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --uc-fz-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --uc-fz-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --uc-fz-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --uc-fz-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem);
  --uc-fz-xl: clamp(1.4rem, 1.25rem + 0.75vw, 1.65rem);
  --uc-fz-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.15rem);
  --uc-fz-3xl: clamp(2.2rem, 1.8rem + 1.6vw, 2.85rem);

  /* Spacing */
  --uc-space-1: 0.25rem;
  --uc-space-2: 0.5rem;
  --uc-space-3: 0.75rem;
  --uc-space-4: 1rem;
  --uc-space-5: 1.25rem;
  --uc-space-6: 1.5rem;
  --uc-space-8: 2rem;
  --uc-space-10: 2.5rem;
  --uc-space-12: 3rem;
  --uc-space-16: 4rem;

  /* Border Radii */
  --uc-radius-sm: 6px;
  --uc-radius-md: 10px;
  --uc-radius-lg: 16px;
  --uc-radius-xl: 22px;
  --uc-radius-pill: 9999px;

  /* Shadows */
  --uc-shadow-xs: 0 1px 2px 0 rgba(18, 33, 25, 0.05);
  --uc-shadow-sm: 0 2px 6px -1px rgba(18, 33, 25, 0.08), 0 1px 3px -1px rgba(18, 33, 25, 0.04);
  --uc-shadow-md: 0 8px 24px -4px rgba(18, 33, 25, 0.1), 0 4px 12px -2px rgba(18, 33, 25, 0.05);
  --uc-shadow-lg: 0 16px 36px -6px rgba(18, 33, 25, 0.14), 0 6px 16px -3px rgba(18, 33, 25, 0.06);
  --uc-shadow-card: 0 4px 20px -2px rgba(18, 33, 25, 0.06);
  --uc-shadow-hover: 0 12px 30px -4px rgba(18, 33, 25, 0.12);

  /* Transitions */
  --uc-transition-fast: 0.15s ease;
  --uc-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --uc-transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --uc-container-max: 1320px;
  --uc-container-padding: clamp(1rem, 3.5vw, 2rem);
  --uc-z-dropdown: 1000;
  --uc-z-sticky: 500;
  --uc-z-drawer: 1200;
}