/* ═══════════════════════════════════════════════════════════════════════════
   RenDS — Registered Custom Properties (CSS Houdini @property)
   ═══════════════════════════════════════════════════════════════════════════
   @property tells the browser the *type* of a custom property, enabling:
   - Smooth transitions/animations on custom properties
   - Proper inheritance behavior
   - Type-safe fallback values

   Without @property, the browser treats custom properties as opaque strings,
   so `transition: --color-accent 200ms` silently does nothing.
   With @property, the browser knows it's a <color> and can interpolate it.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Color Tokens ───
   Enables smooth color transitions when theme/mode changes.

   NOTA sobre hex literals:
     CSS Houdini @property exige un initial-value resuelto — no acepta
     var() ni light-dark(). Los hex aquí DEBEN ser literales. Los valores
     reflejan la paleta RenDS real (Apple HIG) para que el fallback del
     browser se vea idéntico a los tokens cargados por tokens/semantic/.
   */

@property --color-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #0063D1; /* --blue-600 */
}

@property --color-accent-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #004DA3; /* --blue-700 */
}

@property --color-surface {
  syntax: '<color>';
  inherits: true;
  initial-value: #FFFFFF; /* --white */
}

@property --color-surface-raised {
  syntax: '<color>';
  inherits: true;
  initial-value: #FFFFFF; /* --white */
}

@property --color-text {
  syntax: '<color>';
  inherits: true;
  initial-value: #000000; /* --black */
}

@property --color-text-muted {
  syntax: '<color>';
  inherits: true;
  initial-value: #636366; /* --gray-700 */
}

@property --color-border {
  syntax: '<color>';
  inherits: true;
  initial-value: #E5E5EA; /* --gray-200 */
}

@property --color-focus-ring {
  syntax: '<color>';
  inherits: true;
  initial-value: #0063D1; /* --blue-600 */
}

/* ─── Duration Tokens ───
   Enables smooth transitions between duration values */

@property --duration-fast {
  syntax: '<time>';
  inherits: true;
  initial-value: 100ms;
}

@property --duration-normal {
  syntax: '<time>';
  inherits: true;
  initial-value: 150ms;
}

@property --duration-moderate {
  syntax: '<time>';
  inherits: true;
  initial-value: 250ms;
}

@property --duration-slow {
  syntax: '<time>';
  inherits: true;
  initial-value: 300ms;
}

/* ─── Spacing Tokens ───
   Enables smooth spacing animations */

@property --space-1 {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.25rem;
}

@property --space-2 {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.5rem;
}

@property --space-4 {
  syntax: '<length>';
  inherits: true;
  initial-value: 1rem;
}

/* ─── Radius Tokens ───
   Enables smooth border-radius animations */

@property --radius-sm {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.25rem;
}

@property --radius-md {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.5rem;
}

@property --radius-lg {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.75rem;
}