/*
 * CLINOVA – Design Tokens
 * Single source of truth for colors, typography, shadows, transitions.
 * Include in any page that previously redeclared :root variables.
 */

:root {
  /* === Brand === */
  --color-orange:        #FF3D00;
  --color-orange-light:  #FF6E40;
  --color-orange-dark:   #E63400;
  --color-blue:          #1FA8FF;
  --color-blue-light:    #42B5FF;
  --color-blue-dark:     #0277BD;

  /* === Neutrals === */
  --color-white:         #FFFFFF;
  --color-black:         #0A0A0A;
  --color-bg:            #F4F6FA;
  --color-bg-elevated:   #FFFFFF;
  --color-border:        #E2E8F0;
  --color-text:          #1A202C;
  --color-text-light:    #4A5568;
  --color-text-muted:    #718096;

  /* === Status === */
  --color-success:       #10B981;
  --color-success-bg:    #D1FAE5;
  --color-success-text:  #065F46;
  --color-warning:       #F59E0B;
  --color-warning-bg:    #FEF3C7;
  --color-warning-text:  #92400E;
  --color-danger:        #EF4444;
  --color-danger-bg:     #FEE2E2;
  --color-danger-text:   #991B1B;
  --color-info:          var(--color-blue);
  --color-info-bg:       #DBEAFE;
  --color-info-text:     #1E40AF;
  --color-error:         #FF5252;

  /* === Glass / dark surfaces === */
  --glass-bg:            rgba(255, 255, 255, 0.08);
  --glass-border:        rgba(255, 255, 255, 0.18);
  --dark-bg:             #0A0A0A;
  --dark-bg-soft:        #111418;
  --dark-text:           #E6EAF2;
  --dark-text-muted:     #94A3B8;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.18);

  /* === Glows (neon accents) === */
  --glow-orange: 0 0 24px rgba(255, 61, 0, 0.45), 0 0 60px rgba(255, 61, 0, 0.18);
  --glow-blue:   0 0 24px rgba(31, 168, 255, 0.45), 0 0 60px rgba(31, 168, 255, 0.18);

  /* === Typography === */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;

  /* === Spacing scale (4px base) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* === Motion === */
  --transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Global base === */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === Focus rings (accessibility) === */
:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }

/* === Print === */
@media print {
  body { background: white; color: black; }
  .no-print { display: none !important; }
  .page-break { page-break-before: always; }
}

/* === Respect reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}