/* ============================================================
   Contribuya Design Tokens v1.0
   Fuente unica de verdad para marca, colores, tipografia,
   espaciado, sombras y transiciones.
   ============================================================ */

/* --- 1. Color Primitives --- */
:root {
  /* Brand palette */
  --cy-purple: #37284f;
  --cy-purple-light: #4a3868;
  --cy-purple-dark: #271c38;
  --cy-orange: #e67542;
  --cy-orange-light: #f09060;
  --cy-orange-dark: #c85e2f;
  --cy-teal: #31989d;
  --cy-teal-light: #45b0b5;
  --cy-teal-dark: #247275;
  --cy-green: #3dbc73;
  --cy-green-light: #56d08c;
  --cy-green-dark: #2e9a5b;

  /* Neutrals */
  --cy-white: #ffffff;
  --cy-gray-50: #f8faf9;
  --cy-gray-100: #f1f5f3;
  --cy-gray-200: #e2e8e5;
  --cy-gray-300: #cdd6d2;
  --cy-gray-400: #9ca8a3;
  --cy-gray-500: #6b7b74;
  --cy-gray-600: #4a5650;
  --cy-gray-700: #333d39;
  --cy-gray-800: #1e2724;
  --cy-gray-900: #111816;

  /* Status */
  --cy-danger: #c0392b;
  --cy-danger-light: #f8d7da;
  --cy-warning: #e2a03f;
  --cy-warning-light: #fff3cd;
  --cy-info: #2196f3;
  --cy-info-light: #d1ecf1;
}

/* --- 2. Semantic Tokens (Light Mode - Default) --- */
:root {
  /* Surfaces */
  --cy-bg: var(--cy-gray-50);
  --cy-surface: var(--cy-white);
  --cy-surface-raised: var(--cy-white);
  --cy-surface-alpha: rgba(255, 255, 255, 0.92);
  --cy-overlay: rgba(0, 0, 0, 0.45);

  /* Text */
  --cy-text: var(--cy-gray-900);
  --cy-text-muted: var(--cy-gray-500);
  --cy-text-inverse: var(--cy-white);

  /* Borders */
  --cy-border: var(--cy-gray-200);
  --cy-border-strong: var(--cy-gray-300);

  /* Brand semantic */
  --cy-brand: var(--cy-purple);
  --cy-brand-soft: #ece7f1;
  --cy-accent: var(--cy-orange);
  --cy-accent-soft: #fde8dc;
  --cy-success: var(--cy-green);
  --cy-success-soft: #dff5e9;

  /* Interactive */
  --cy-link: var(--cy-teal);
  --cy-link-hover: var(--cy-teal-dark);
  --cy-focus-ring: rgba(49, 152, 157, 0.35);
}

/* --- 3. Dark Mode Overrides --- */
[data-theme='dark'] {
  /* Surfaces */
  --cy-bg: #0f1419;
  --cy-surface: #1a2028;
  --cy-surface-raised: #222a33;
  --cy-surface-alpha: rgba(26, 32, 40, 0.92);
  --cy-overlay: rgba(0, 0, 0, 0.7);

  /* Text */
  --cy-text: #e8ecf0;
  --cy-text-muted: #8a97a5;
  --cy-text-inverse: var(--cy-gray-900);

  /* Borders */
  --cy-border: #2a3440;
  --cy-border-strong: #3a4854;

  /* Brand semantic (adjusted for dark backgrounds) */
  --cy-brand: #9b85c4;
  --cy-brand-soft: rgba(55, 40, 79, 0.35);
  --cy-accent: #f09060;
  --cy-accent-soft: rgba(230, 117, 66, 0.2);
  --cy-success: #56d08c;
  --cy-success-soft: rgba(61, 188, 115, 0.2);

  /* Interactive */
  --cy-link: #45b0b5;
  --cy-link-hover: #6bc5c9;
  --cy-focus-ring: rgba(69, 176, 181, 0.4);

  /* Status */
  --cy-danger: #e74c3c;
  --cy-danger-light: rgba(192, 57, 43, 0.2);
  --cy-warning-light: rgba(226, 160, 63, 0.2);
  --cy-info-light: rgba(33, 150, 243, 0.2);
}

/* --- 4. Typography --- */
:root {
  --cy-font-body:
    'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cy-font-mono: 'Cascadia Mono', Consolas, 'Courier New', monospace;

  /* Type scale (fluid) */
  --cy-text-xs: 0.75rem;
  --cy-text-sm: 0.875rem;
  --cy-text-base: 1rem;
  --cy-text-lg: 1.125rem;
  --cy-text-xl: clamp(1.15rem, 1.5vw, 1.25rem);
  --cy-text-2xl: clamp(1.35rem, 2vw, 1.5rem);
  --cy-text-3xl: clamp(1.6rem, 2.5vw, 2rem);
  --cy-text-4xl: clamp(2rem, 3vw, 2.5rem);

  /* Line heights */
  --cy-leading-tight: 1.25;
  --cy-leading-normal: 1.5;
  --cy-leading-relaxed: 1.75;

  /* Font weights */
  --cy-font-normal: 400;
  --cy-font-medium: 500;
  --cy-font-semibold: 600;
  --cy-font-bold: 700;
  --cy-font-extrabold: 800;
}

/* --- 5. Spacing Scale (base 4px) --- */
:root {
  --cy-space-0: 0;
  --cy-space-1: 4px;
  --cy-space-2: 8px;
  --cy-space-3: 12px;
  --cy-space-4: 16px;
  --cy-space-5: 20px;
  --cy-space-6: 24px;
  --cy-space-8: 32px;
  --cy-space-10: 40px;
  --cy-space-12: 48px;
  --cy-space-16: 64px;
  --cy-space-20: 80px;
}

/* --- 6. Border Radius --- */
:root {
  --cy-radius-xs: 4px;
  --cy-radius-sm: 6px;
  --cy-radius-md: 12px;
  --cy-radius-lg: 18px;
  --cy-radius-xl: 24px;
  --cy-radius-full: 999px;
}

/* --- 7. Shadows --- */
:root {
  --cy-shadow-sm: 0 2px 8px rgba(24, 40, 52, 0.06);
  --cy-shadow-md: 0 8px 20px rgba(24, 40, 52, 0.08);
  --cy-shadow-lg: 0 16px 36px rgba(24, 40, 52, 0.12);
  --cy-shadow-xl: 0 24px 48px rgba(24, 40, 52, 0.16);
}

[data-theme='dark'] {
  --cy-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --cy-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.3);
  --cy-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.4);
  --cy-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* --- 8. Transitions --- */
:root {
  --cy-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --cy-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cy-duration-fast: 0.15s;
  --cy-duration-normal: 0.3s;
  --cy-duration-slow: 0.5s;
}

/* --- 9. Glassmorphism Presets --- */
:root {
  --cy-glass-bg: rgba(255, 255, 255, 0.6);
  --cy-glass-border: rgba(255, 255, 255, 0.25);
  --cy-glass-blur: blur(16px);
}

[data-theme='dark'] {
  --cy-glass-bg: rgba(26, 32, 40, 0.6);
  --cy-glass-border: rgba(255, 255, 255, 0.08);
}

/* --- 10. Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cy-duration-fast: 0.01ms;
    --cy-duration-normal: 0.01ms;
    --cy-duration-slow: 0.01ms;
  }

  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* --- 11. Focus Visible (A11y) --- */
:where(
  a,
  button,
  input,
  textarea,
  select,
  summary,
  [role='button'],
  [tabindex]:not([tabindex='-1'])
):focus-visible {
  outline: 3px solid var(--cy-focus-ring);
  outline-offset: 3px;
  border-radius: 10px;
}

:where(
    a,
    button,
    input,
    textarea,
    select,
    summary,
    [role='button'],
    [tabindex]:not([tabindex='-1'])
  ):focus:not(:focus-visible) {
  outline: none;
}

/* --- 12. Print Reset (Cotizador PDF protection) --- */
@media print {
  :root {
    --cy-bg: #ffffff !important;
    --cy-surface: #ffffff !important;
    --cy-text: #111816 !important;
    --cy-text-muted: #4a5650 !important;
    --cy-border: #cdd6d2 !important;
    --cy-brand: #37284f !important;
    --cy-accent: #e67542 !important;
  }
}