/*-----------------------------------------------------------------------------
 * Project : ai4good - CFP Arts
 * File    : frontend/css/variables.css
 * Stylesheet : design tokens
 * Author  : Johann Sievering
 * AI Support : Claude AI
 * Date    : 2026-06-11 (start of the project)
 * Rev     : 2026-07-03 Full code review: bug fixes, hardening, cartridge headers (Claude AI)
 * Version : 0.9.0
 *-----------------------------------------------------------------------------
 * Colors, semantic aliases, section accents, spacing, typography, radii,
 * shadows, z-index.
 *---------------------------------------------------------------------------*/

/* =====================================================================
 * variables.css — design tokens for the AI4Good Atelier Prompt frontend.
 *
 * Loaded first by every page. Combines:
 *   - The prototype's color palette (zAI4Good_App/index.html): the four
 *     component families (blue/green/orange/purple) the workshop is
 *     built on, plus our reds/greys/inks.
 *   - ISAI 2026's structure: spacing, typography, radius, shadow,
 *     z-index, and app-shell dimension tokens — so the layout language
 *     stays consistent with ISAI.
 * ===================================================================== */

:root {
    /* ── Brand & component families (from the prototype) ── */
    --blue:        #185FA5;
    --blue-50:     #E6F1FB;
    --blue-900:    #042C53;

    --green:       #3B6D11;
    --green-50:    #EAF3DE;
    --green-900:   #173404;

    --orange:      #854F0B;
    --orange-50:   #FAEEDA;
    --orange-900:  #412402;

    --purple:      #534AB7;
    --purple-50:   #EEEDFE;
    --purple-900:  #26215C;

    --red:         #A32D2D;
    --red-50:      #FCEBEB;

    /* ── Neutrals / surfaces ── */
    --gray:        #5F5E5A;
    --gray-border: #D3D1C7;
    --gray-50:     #F1EFE8;
    --ink:         #2C2C2A;
    --bg:          #FAF8F2;
    --bg-card:     #FFFFFF;

    /* ── Semantic aliases (kept to match ISAI's naming) ── */
    --primary:        var(--blue);
    --primary-dark:   var(--blue-900);
    --secondary:      var(--orange);
    --accent:         var(--green);
    --text:           var(--ink);
    --text-light:     var(--gray);
    --border:         var(--gray-border);
    --success:        var(--green);
    --error:          var(--red);

    /* ── Section accents (one per nav tab) ──
       Keys match AppFooter.js SECTIONS (accueil/compose/create/learn/
       contact/more). Colors follow the card families: green = action,
       orange = output, purple = knowledge. */
    --section-accueil:   var(--blue);
    --section-compose:   var(--green);
    --section-create:    var(--orange);
    --section-learn:     var(--purple);
    --section-contact:   var(--blue-900);
    --section-more:      var(--gray);

    /* ── Typography ── */
    --font-family:    "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    /* Larger sizes scale fluidly with the viewport (clamp): the max values
       match the previous fixed sizes, so desktop is unchanged while phones
       shrink headings gracefully — no per-breakpoint overrides needed. */
    --font-size-xl:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
    --font-size-2xl:  clamp(1.30rem,  1.15rem + 0.7vw, 1.5rem);
    --font-size-3xl:  clamp(1.60rem,  1.25rem + 1.6vw, 2rem);
    --line-height:    1.5;

    /* ── Spacing scale ── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;

    /* ── Radius ── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-pill: 999px;

    /* ── Shadow ── */
    --shadow-sm: 0 1px 3px  rgba(0,0,0,0.08);
    --shadow-md: 0 2px 8px  rgba(0,0,0,0.10);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.15);

    /* ── Transitions ── */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s  ease;

    /* ── Z-index layering ── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-banner:   300;
    --z-modal:    900;
    --z-header:   1000;
    --z-footer:   1000;
    --z-drawer:   1050;   /* bottom sheets (More menu) — must cover the footer */
    --z-toast:    1100;

    /* ── App-shell dimensions ── */
    --header-height: 56px;
    --footer-height: 60px;
}

/* Desktop: slightly taller header/footer so labels breathe. */
@media (min-width: 768px) {
    :root {
        --header-height: 64px;
        --footer-height: 64px;
    }
}