/* ==========================================================================
   THEME.CSS — AT STUDIO
   ▸ This is the ONLY file you edit per client.
   ▸ Change the values below to match their wedding theme.
   ▸ Never touch style.css for color changes.
   ========================================================================== */

:root {

    /* ------------------------------------------------------------------
       01. ACCENT COLOR
       The main brand color. Used on borders, glows, labels, buttons.
       For gold theme   → #d4af37
       For violet theme → #8B7FD4
    ------------------------------------------------------------------ */
    --accent:               #d4af37;
    --accent-light:         #f1d592;   /* Lighter version, used on tags & highlights */
    --accent-dark:          #b08d2b;   /* Darker version, used in magazine section */
    --accent-glow:          rgba(212, 175, 55, 0.3);   /* For box-shadows & glows */
    --accent-glow-soft:     rgba(212, 175, 55, 0.15);  /* Very soft glow */
    --accent-glow-faint:    rgba(212, 175, 55, 0.05);  /* Barely visible tint */
    --accent-border:        rgba(212, 175, 55, 0.2);   /* Faint borders */
    --accent-border-mid:    rgba(212, 175, 55, 0.3);   /* Medium borders */
    --accent-border-strong: rgba(212, 175, 55, 0.5);   /* Strong borders */
    --accent-bg:            rgba(212, 175, 55, 0.1);   /* Subtle tinted backgrounds */

    /* ------------------------------------------------------------------
       02. SECONDARY COLOR
       Used on milestone dates, rose stamps, subtle accents.
       For gold/rose theme   → #f6b6c1
       For violet/star theme → #c4b5fd  (soft lavender)
    ------------------------------------------------------------------ */
    --secondary:            #f6b6c1;

    /* ------------------------------------------------------------------
       03. HERO & GATE NUMBER COLOR
       The illuminated "GATE 01" purple on the hero.
       For current theme → #9d7cfd
       Tip: keep this close to --accent or use a complementary color.
    ------------------------------------------------------------------ */
    --hero-gate-color:      #f6b6c1;
    --hero-gate-glow:       rgba(157, 124, 253, 0.3);

    /* ------------------------------------------------------------------
       04. AMPERSAND COLOR
       The "&" between the couple names on the hero.
    ------------------------------------------------------------------ */
    --ampersand-color:      #f6b6c1;

    /* ------------------------------------------------------------------
       05. BACKGROUND COLORS — DARK SECTIONS
       Sections: Journey timeline, RSVP, footer area, nav, loader
    ------------------------------------------------------------------ */
    --bg-darkest:           #000000;   /* Body default, loader, boot screen */
    --bg-dark:              #0e0e0e;   /* data-bg="black" sections */
    --bg-dark-2:            #050505;   /* RSVP section, notch color */
    --bg-dark-3:            #0a0a0a;   /* Split-flap board, flight path */

    /* ------------------------------------------------------------------
       06. BACKGROUND COLORS — LIGHT SECTIONS
       Sections: Magazine, welcome letter, boarding pass card
    ------------------------------------------------------------------ */
    --bg-light:             #f9f9f7;   /* Magazine section background */
    --bg-light-overlay:     #fdfdfb;   /* Magazine overlay, letter content */

    /* ------------------------------------------------------------------
       07. BACKGROUND IMAGES
       Swap these URLs to change section backgrounds per client.
       Tip: use a night sky image for "picnic under the stars" theme.
    ------------------------------------------------------------------ */
    --bg-cinema-image:      url('assets/images/std-section-fullwidth.png');
    --bg-schedule-image:    url('assets/images/flap-board.webp');


    /* Gate page (index.html) background */
    --bg-gate-overlay:      linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85));
    --bg-gate-image:        url('https://images.unsplash.com/photo-1436491865332-7a61a109c0f3?auto=format&fit=max&q=80&w=1440');
    
    /* ------------------------------------------------------------------
       08. SECTION HEADER DECORATORS
       The "❀ ❀ ❀" color that appears under h2 headings.
    ------------------------------------------------------------------ */
    --section-decorator-color: #f6b6c1;

    /* ------------------------------------------------------------------
       09. FUNCTIONAL COLORS — DO NOT CHANGE
       These are UI signals (success/error). Keep them as-is.
    ------------------------------------------------------------------ */
    --success:              #00ff88;
    --error:                #ff4b4b;

}


/* ==========================================================================
   QUICK REFERENCE — HOW TO RETHEME PER CLIENT
   ==========================================================================

   CLIENT: Alex & Eloi (Gold / Aviation — DEFAULT ABOVE)
   No changes needed. The values above are their theme.

   ──────────────────────────────────────────────────────────────────────────

   CLIENT TEMPLATE: Picnic Under the Stars (Midnight Blue / Violet / Light Yellow)
   Copy-paste this block and replace the :root above:

   :root {
       --accent:               #8B7FD4;
       --accent-light:         #FFF5C0;
       --accent-dark:          #6B5FB0;
       --accent-glow:          rgba(139, 127, 212, 0.3);
       --accent-glow-soft:     rgba(139, 127, 212, 0.15);
       --accent-glow-faint:    rgba(139, 127, 212, 0.05);
       --accent-border:        rgba(139, 127, 212, 0.2);
       --accent-border-mid:    rgba(139, 127, 212, 0.3);
       --accent-border-strong: rgba(139, 127, 212, 0.5);
       --accent-bg:            rgba(139, 127, 212, 0.1);

       --secondary:            #C4B5FD;

       --hero-gate-color:      #818CF8;
       --hero-gate-glow:       rgba(129, 140, 248, 0.3);

       --ampersand-color:      #C4B5FD;

       --bg-darkest:           #020817;
       --bg-dark:              #080C1F;
       --bg-dark-2:            #050A18;
       --bg-dark-3:            #0A0F2E;

       --bg-light:             #F5F0FF;
       --bg-light-overlay:     #FAF7FF;

       --bg-cinema-image:      url('assets/images/std-section-fullwidth.png');
       --bg-schedule-image:    url('assets/images/flap-board.webp');

       --section-decorator-color: #C4B5FD;

       --success:              #00ff88;
       --error:                #ff4b4b;
   }

   ========================================================================== */