/*
 * starterCreative — Design Tokens
 * Le child theme surcharge ces variables dans son propre assets/css/variables.css
 *
 * NOTE : Les variables --sc-bp-* sont des références documentaires et JS uniquement.
 * Les @media queries utilisent les valeurs en dur (768px, 1024px, 1280px)
 * car les CSS custom properties ne sont pas valides dans @media.
 */
:root {
    /* Couleurs */
    --sc-color-primary:    #000000;
    --sc-color-secondary:  #ffffff;
    --sc-color-accent:     #0066ff;
    --sc-color-text:       #1a1a1a;
    --sc-color-text-muted: #666666;
    --sc-color-bg:         #ffffff;
    --sc-color-bg-alt:     #f5f5f5;
    --sc-color-border:     #e0e0e0;

    /* Typographie — polices auto-hébergées dans assets/fonts/ */
    --sc-font-primary:   'Inter', system-ui, sans-serif;
    --sc-font-secondary: 'Georgia', serif;
    --sc-font-size-base: 16px;
    --sc-font-size-sm:   14px;
    --sc-font-size-lg:   20px;
    --sc-font-size-xl:   28px;
    --sc-font-size-xxl:  40px;
    --sc-line-height:    1.6;

    /* Espacements */
    --sc-spacing-xs:  4px;
    --sc-spacing-sm:  8px;
    --sc-spacing-md:  16px;
    --sc-spacing-lg:  32px;
    --sc-spacing-xl:  64px;
    --sc-spacing-xxl: 128px;

    /* Layout */
    --sc-container-max: 1280px;
    --sc-container-pad: 24px;
    --sc-radius:        4px;
    --sc-radius-lg:     8px;

    /* Breakpoints (référence JS uniquement) */
    --sc-bp-mobile:  768px;
    --sc-bp-tablet:  1024px;
    --sc-bp-desktop: 1280px;

    /* États formulaire */
    --sc-color-success-bg:     #ecfdf5;
    --sc-color-success-text:   #065f46;
    --sc-color-success-border: #a7f3d0;
    --sc-color-error-bg:       #fef2f2;
    --sc-color-error-text:     #991b1b;
    --sc-color-error-border:   #fecaca;
    --sc-color-error:          #b91c1c;

    /* Transitions */
    --sc-transition-fast: 0.15s ease;
    --sc-transition:      0.2s ease;
    --sc-transition-slow: 0.3s ease;

    /* Ombres */
    --sc-shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.22);
    --sc-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.28);

    /* Anchor rail
     * NOTE : Ces valeurs sont des défauts du thème parent.
     * Le thème enfant (starterCreative-k-invest/style.css) les surcharge via
     * --sc-anchor-dot-active: var(--ki-gold), --sc-anchor-fab-bg: var(--ki-navy), etc.
     * Ne pas "corriger" ces hex en les pointant vers --sc-color-* : ils n'ont
     * pas d'équivalent dans la palette parent générique. */
    --sc-anchor-dot-active:  #c9a24d;
    --sc-anchor-fab-bg:      #162741;
    --sc-anchor-fab-hover:   #1e2f4c;
    --sc-anchor-outline:     #bf8d38;
    --sc-anchor-text-light:  #f4f6fb;

    /* Dialog d'ancres (mobile) */
    --sc-shadow-dialog: 0 -8px 40px rgba(0, 0, 0, 0.35);
    --sc-backdrop:      rgba(10, 16, 28, 0.55);
    --sc-white-08:      rgba(255, 255, 255, 0.08);
}