/* ==========================================================================
   Acephal — Design tokens
   Source of truth: plaquette_css (palette, typography) and
   plaquette_projet (ecosystem accents). Never hard-code colors elsewhere.
   ========================================================================== */

:root {
    /* ---- Core palette (plaquette_css) ---------------------------------- */
    --acephal-night: #0B1F3B;        /* Bleu nuit — Confiance */
    --acephal-blue: #1E90FF;         /* Bleu principal — Technologie */
    --acephal-cyan: #00D4FF;         /* Bleu clair — Innovation */
    --acephal-gray: #E6EDF5;         /* Gris clair — Equilibre */
    --acephal-anthracite: #0F172A;   /* Gris anthracite — Elegance */
    --acephal-white: #FFFFFF;        /* Blanc — Simplicite */
    --acephal-orange: #F5A623;       /* Accent — Energie */

    /* ---- Derived neutrals ---------------------------------------------- */
    --acephal-night-deep: #071429;   /* page background below the hero */
    --acephal-text-muted: #334155;   /* body copy on light cards */
    --acephal-line: rgba(230, 237, 245, 0.22);   /* thin separators on dark */

    /* ---- Ecosystem accents (plaquette_projet) ----------------------------
       Each domain exposes three tones:
       - accent:    icons and borders on light surfaces
       - strong:    CTA background (white text, WCAG AA)
       - on-image:  domain name drawn over the card visual
       --------------------------------------------------------------------- */
    --eco-eu-accent: #1E6FE8;
    --eco-eu-strong: #1565E0;
    --eco-eu-on-image: #1E6FE8;

    --eco-cloud-accent: var(--acephal-blue);
    --eco-cloud-strong: #0B72C9;
    --eco-cloud-on-image: #38C8F5;

    --eco-app-accent: #6A3BEB;
    --eco-app-strong: #5B2BDB;
    --eco-app-on-image: #A48BFF;

    --eco-website-accent: #0E8F6A;
    --eco-website-strong: #0B7A5C;
    --eco-website-on-image: #3DDFB0;

    --eco-pro-accent: #DD6A12;
    --eco-pro-strong: #C4500C;
    --eco-pro-on-image: var(--acephal-orange);

    /* ---- Typography ---------------------------------------------------- */
    --font-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-quote: Georgia, "Times New Roman", serif;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --tracking-label: 0.22em;      /* uppercase labels */
    --tracking-wide: 0.3em;        /* tagline */
    --tracking-title: 0.08em;      /* "Acephal" wordmark and card titles */

    /* ---- Spacing scale ------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ---- Layout -------------------------------------------------------- */
    --container-max: 1520px;
    --gutter: clamp(1rem, 3vw, 3.5rem);
    --gutter-wide: clamp(0.75rem, 1vw, 1rem);   /* card row runs wider than hero text */
    --card-gap: 0.5rem;

    /* ---- Shape & effects ----------------------------------------------- */
    --radius-card: 10px;
    --radius-pill: 999px;
    --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
    --focus-ring: 0 0 0 3px var(--acephal-cyan);

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --duration: 220ms;
}