/* ============================================
   design-tokens.css
   CSS Custom Properties del Design System
   Luminous Observer — Biohuellas
   ============================================ */

/* (Las variables principales están declaradas en style.css :root)
   Este archivo extiende con tokens adicionales de componente. */

:root {
  /* Transiciones */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index layers */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    200;
  --z-modal:    300;
  --z-toast:    400;

  /* Container */
  --container-max:  1280px;
  --container-pad:  clamp(1.25rem, 5vw, 4rem);

  /* Section spacing */
  --section-pad-y: clamp(3rem, 8vw, 8rem);

  /* Card tokens */
  --card-radius:   var(--radius-xl);
  --card-pad:      var(--space-xl);
  --card-shadow:   var(--shadow-ambient);

  /* Button tokens */
  --btn-height-md:  2.75rem;
  --btn-height-lg:  3.25rem;
  --btn-pad-x:      var(--space-xl);
  --btn-font-size:  var(--font-size-body-md);
  --btn-font-weight: 600;
  --btn-radius:     var(--radius-full);
  --btn-transition: var(--transition-base);

  /* Input tokens */
  --input-height:   3rem;
  --input-radius:   var(--radius-lg);
  --input-bg:       var(--color-surface-container-lowest);
  --input-border:   1px solid rgba(191,202,182,0.4);
  --input-focus-glow: 0 0 0 3px rgba(22,110,0,0.15);

  /* Header tokens */
  --header-height:    5rem;
  --header-bg:        rgba(246, 251, 238, 0.75);
  --header-blur:      20px;
  --header-border:    1px solid rgba(191,202,182,0.25);
  --header-shadow:    0 2px 20px rgba(24,29,21,0.05);
}

/* ============================================
   DARK MODE OVERRIDES (futuro)
   ============================================ */
@media (prefers-color-scheme: dark) {
  /* Se puede activar en futuras iteraciones del tema */
}