/* colors.css — SINGLE SOURCE OF TRUTH for every color in the project.
 *
 * Rules:
 *   - Define values ONLY here. All other CSS files use var() references.
 *   - Raw palette → semantic aliases → backward-compat aliases (for existing CSS).
 *   - Do not add layout, spacing, or typography here.
 */

:root { 

    /* ── Raw brand palette ────────────────────────────────────────────────────
     * Warm terracotta/orange — professional Spanish educator, Mediterranean
     * warmth, confident without being aggressive. Works on both light and dark.
     */
    --color-primary:        #C8542A;   /* warm terracotta — primary action color  */
    --color-primary-hover:  #A8431E;   /* 15% darker for hover states             */
    --color-primary-light:  #F9EDE6;   /* very light warm tint — subtle highlights */
    --color-dark:           #1C1917;   /* warm near-black — bold headings           */
    --color-nav-dark-red:       #791724;   /* deep burgundy red — nav + primary buttons */
    --color-nav-dark-red-hover: #67131F;   /* 15% darker — hover state                 */
    --color-faq-gradient-deep:  #5C111E;   /* darkened burgundy — gradient shadow stop  */
    --color-faq-gradient-lift:  #8D1E2E;   /* lightened burgundy — gradient highlight   */
    --color-light:          #FDFAF6;   /* warm off-white — page background         */
    --color-text-main:      #292524;   /* warm dark charcoal — body copy           */
    --color-text-muted:     #78716C;   /* warm stone grey — captions, supporting   */
    --color-white:          #ffffff;
    --color-border:         #E7E5E4;   /* subtle warm border / divider             */
    --color-bg-section:     #F4EFE9;   /* slightly deeper warm for alt sections    */

    /* ── Status / functional colors ──────────────────────────────────────────
     * Kept intentionally neutral so they read correctly on both warm and
     * light backgrounds.
     */
    --color-success:         #16a34a;
    --color-success-bg:      #f0fdf4;
    --color-success-border:  #bbf7d0;
    --color-error:           #dc2626;
    --color-error-bg:        #fef2f2;
    --color-error-border:    #fecaca;
    --color-danger-hover:    #b91c1c;
    --color-warning-bg:      #fef3c7;
    --color-warning-text:    #92400e;
    --color-hover-subtle:    #f5f5f5;

    /* Focus ring uses the primary at low opacity so it inherits the brand color. */
    --color-focus-ring:     rgba(200, 84, 42, 0.22);

    /* ── Value card backgrounds — soft tints harmonious with the terracotta palette */
    --color-card-1: #FEF3C7;   /* warm cream/amber — Venezuelan heritage, warmth  */
    --color-card-2: #ECFDF5;   /* soft sage/mint — personal growth, freshness     */
    --color-card-3: #FFF7ED;   /* light papaya/peach — conversation, openness     */
    --color-card-4: #EFF6FF;   /* pale sky/ice blue — flexibility, calm clarity   */
    --color-card-5: #F5F3FF;   /* soft lavender — professional, Business Spanish  */
    --color-card-6: #FDF4FF;   /* pale orchid — structured, purposeful            */
    --color-card-7: #F0FDFA;   /* pale aqua/teal — progressive levels, growth     */
    --color-card-8: #FEFCE8;   /* pale lemon/champagne — achievement, results     */

    /* ── Semantic aliases — use these in component CSS, not the raw palette ──
     * Naming them by role (not hue) means a palette swap only touches this file.
     */
    --color-nav-bg:               var(--color-nav-dark-red);
    --color-nav-text:             var(--color-white);
    --color-nav-text-dim:         rgba(255, 255, 255, 0.7);
    --color-nav-active:           var(--color-white);
    --color-nav-hover-bg:         rgba(255, 255, 255, 0.08);

    --color-cta-primary-bg:       var(--color-nav-dark-red);
    --color-cta-primary-text:     var(--color-white);
    --color-cta-primary-hover-bg: var(--color-nav-dark-red-hover);

    --color-cta-secondary-bg:     transparent;
    --color-cta-secondary-border: var(--color-dark);
    --color-cta-secondary-text:   var(--color-dark);
    --color-cta-secondary-hover-bg: var(--color-dark);
    --color-cta-secondary-hover-text: var(--color-white);

    /* ── Backward-compat aliases — existing CSS uses these names ─────────────
     * These point to the new raw/semantic vars so old code keeps working
     * without changes. New code should use the new names above.
     */
    --color-text:         var(--color-text-main);
    --color-bg:           var(--color-white);
    --color-bg-alt:       var(--color-bg-section);
    --color-primary-dark: var(--color-primary-hover);
    --color-accent:       var(--color-primary);
}