/* ==========================================================================
   EuroCheking v2 — Design Tokens
   Colors, spacing, typography, shadows, dark mode
   ========================================================================== */

:root {
  /* --- Colors --- */
  --c-primary: #0071e3;
  --c-primary-hover: #0077ed;
  --c-primary-light: #e8f2fd;
  --c-primary-dark: #005bb5;

  --c-success: #34c759;
  --c-success-hover: #30b350;
  --c-success-light: #eafaf0;

  --c-warning: #ff9f0a;
  --c-warning-hover: #e69500;
  --c-warning-light: #fff8e5;

  --c-danger: #ff3b30;
  --c-danger-hover: #e0352b;
  --c-danger-light: #ffebea;

  --c-info: #5ac8fa;
  --c-info-light: #e8f7fe;

  --c-bg: #f5f5f7;
  --c-surface: #ffffff;
  --c-text: #1d1d1f;
  --c-text-secondary: #86868b;
  --c-border: #d2d2d7;
  --c-border-light: #e5e5ea;

  /* --- Spacing --- */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;

  /* --- Typography --- */
  --f-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --f-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono",
    Consolas, monospace;

  --f-xs: 12px;
  --f-sm: 14px;
  --f-md: 16px;
  --f-lg: 20px;
  --f-xl: 28px;
  --f-2xl: 36px;

  --f-weight-normal: 400;
  --f-weight-medium: 500;
  --f-weight-semibold: 600;
  --f-weight-bold: 700;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* --- Border Radius --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* --- Layout --- */
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 64px;
  --content-max: 1400px;
  --header-h: 56px;
  --footer-h: 48px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-100: 100ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;

  /* --- Z-Index --- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-modal-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}

/* --- Dark Mode --- */
.dark {
  --c-primary: #0a84ff;
  --c-primary-hover: #409cff;
  --c-primary-light: #1a2a3d;
  --c-primary-dark: #0066cc;

  --c-success: #30d158;
  --c-success-hover: #34e05c;
  --c-success-light: #1a2e20;

  --c-warning: #ff9f0a;
  --c-warning-hover: #ffb340;
  --c-warning-light: #2e2410;

  --c-danger: #ff453a;
  --c-danger-hover: #ff6960;
  --c-danger-light: #2e1c1a;

  --c-info: #64d2ff;
  --c-info-light: #1a2a30;

  --c-bg: #000000;
  --c-surface: #1c1c1e;
  --c-text: #f5f5f7;
  --c-text-secondary: #98989d;
  --c-border: #3a3a3c;
  --c-border-light: #2c2c2e;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --c-primary: #0a84ff;
    --c-primary-hover: #409cff;
    --c-primary-light: #1a2a3d;
    --c-primary-dark: #0066cc;

    --c-success: #30d158;
    --c-success-hover: #34e05c;
    --c-success-light: #1a2e20;

    --c-warning: #ff9f0a;
    --c-warning-hover: #ffb340;
    --c-warning-light: #2e2410;

    --c-danger: #ff453a;
    --c-danger-hover: #ff6960;
    --c-danger-light: #2e1c1a;

    --c-info: #64d2ff;
    --c-info-light: #1a2a30;

    --c-bg: #000000;
    --c-surface: #1c1c1e;
    --c-text: #f5f5f7;
    --c-text-secondary: #98989d;
    --c-border: #3a3a3c;
    --c-border-light: #2c2c2e;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-100: 0ms;
    --duration-200: 0ms;
    --duration-300: 0ms;
    --duration-500: 0ms;
  }
}

@media (prefers-contrast: high) {
  :root {
    --c-border: #000000;
    --c-text: #000000;
    --c-text-secondary: #333333;
  }
  .dark {
    --c-border: #ffffff;
    --c-text: #ffffff;
    --c-text-secondary: #cccccc;
  }
}