/* ==========================================================================
   public/css/colors.css | MAGNA Design Tokens (basado en Magna.md)
   "Warm workshop with coral sparks": lienzo crema + un solo naranja vivo.
   ========================================================================== */

:root {
    /* 1. PALETA (Magna.md › Tokens — Colors)
       ---------------------------------------------------------------------- */
    --color-ember-orange:  #ff3c00; /* CTAs, estados activos, acentos */
    --color-sunset-coral:  #ff764c; /* Tarjetas destacadas de alta energía */
    --color-peach-blush:   #ffb199; /* Tarjetas destacadas suaves */
    --color-burnt-rust:    #ec4e02; /* Hover del CTA, bordes de foco */
    --color-electric-blue: #2492ff; /* Solo diferenciación secundaria */
    --color-warm-canvas:   #faf6f1; /* Fondo de página */
    --color-pure-white:    #ffffff; /* Tarjetas e inputs */
    --color-ink-black:     #0e0e0f; /* Texto principal */
    --color-charcoal:      #312e2e;
    --color-slate:         #36373b;
    --color-deep-charcoal: #1a1919; /* Tarjetas oscuras de preview */
    --color-gunmetal:      #2f3034;
    --color-stone:         #898c94;
    --color-pewter:        #52545a; /* Texto de cuerpo */
    --color-warm-gray:     #76716f; /* Texto auxiliar / eyebrows */
    --color-mist:          #61646b;
    --color-sand:          #dfddd8; /* Bordes hairline */
    --color-driftwood:     #cbc7c3;
    --color-fog:           #efefef;

    /* 2. SUPERFICIES (Magna.md › Surfaces)
       ---------------------------------------------------------------------- */
    --surface-warm-canvas:   var(--color-warm-canvas);
    --surface-card-white:    var(--color-pure-white);
    --surface-sand-wash:     var(--color-sand);
    --surface-peach-feature: var(--color-peach-blush);
    --surface-coral-feature: var(--color-sunset-coral);
    --surface-dark-preview:  var(--color-deep-charcoal);

    /* 3. ESPACIADO, LAYOUT Y RADIOS
       ---------------------------------------------------------------------- */
    --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px;
    --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px;
    --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px;
    --spacing-60: 60px; --spacing-64: 64px; --spacing-80: 80px;
    --spacing-120: 120px;

    --page-max-width: 1200px;
    --section-gap:    80px;
    --card-padding:   32px;
    --element-gap:    12px;

    --radius-nav:     6px;
    --radius-badges:  6px;
    --radius-inputs:  6px;
    --radius-prompt:  20px;
    --radius-card-sm: 20px;
    --radius-cards:   40px;
    --radius-buttons: 100px;

    /* 4. ALIAS LEGADOS
       Se conservan porque las vistas y otros CSS los referencian.
       --accent-beige mantiene su valor original: lo usa la sombra decorativa
       de la imagen de "Nosotros", que no debe cambiar.
       ---------------------------------------------------------------------- */
    --black:        var(--color-ink-black);
    --white:        var(--color-pure-white);
    --beige:        #D6CFC7;
    --white-beige:  var(--color-warm-canvas);
    --primary-dark: var(--color-ink-black);
    --accent-beige: #D6CFC7;

    --bg-dark:      var(--surface-dark-preview);
    --bg-beige:     var(--color-warm-canvas);
    --bg-white:     var(--color-warm-canvas);
    --text-light:   var(--color-pure-white);
    --text-dark:    var(--color-ink-black);
    --bg-splash:    var(--color-warm-canvas);
    --text-splash:  var(--color-ink-black);
}

/* 5. UTILIDADES COMPLEMENTARIAS
   ---------------------------------------------------------------------- */
.border-dark  { border-color: var(--color-sand) !important; }
.border-light { border-color: rgba(255, 255, 255, 0.12) !important; }