/* ============================================
   DESIGN TOKENS — Thibaut Loubère
   Source : 01 - ORGANISME / Communication publique / tokens-design-system.zip
   Fichier généré par concaténation des 5 fichiers officiels, contenu inchangé.
   Ne pas redéfinir ces valeurs ailleurs : toute page du site doit charger ce
   fichier et consommer ces variables telles quelles.
============================================ */

/* ---- fonts.css ---- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600&display=swap');

/* ---- colors.css ----
   Direction : teal profond / lime acidulé / mint / rose poudré
*/
:root {
    /* ---- Base palette ---- */
    --tl-teal:          #0F3B40;   /* teal profond — fond hero & sections sombres, texte sur clair */
    --tl-teal-deep:     #0B2E32;   /* teal encore plus foncé — footer, surfaces dark-2 */
    --tl-cream:         #F5F1E8;   /* crème — fond sections claires, texte sur dark */
    --tl-cream-bright:  #FFFDF7;   /* crème lumineux — surfaces de cartes claires */
    --tl-white:         #FFFFFF;

    --tl-lime:          #D9F26A;   /* jaune-lime acidulé — accent principal, pills, highlight */
    --tl-mint:          #3DE0B4;   /* mint / vert d'eau — CTA, accents */
    --tl-pink:          #F5B6CC;   /* rose poudré — pills, accents doux */
    --tl-pink-strong:   #F58FB0;   /* rose soutenu — trait du scribble */

    --tl-ink:           #0F3B40;   /* texte principal sur fond clair */
    --tl-ink-soft:      #4B6266;   /* texte secondaire sur fond clair */

    /* ---- Alpha / borders ---- */
    --tl-border:        rgba(15, 59, 64, 0.10);   /* bord sur fond clair */
    --tl-border-strong: rgba(15, 59, 64, 0.18);
    --tl-border-light:  rgba(245, 241, 232, 0.12); /* bord sur fond sombre */

    /* ---- Cream text overlays (sur fond dark) ---- */
    --tl-on-dark:       var(--tl-cream);
    --tl-on-dark-70:    rgba(245, 241, 232, 0.70);
    --tl-on-dark-55:    rgba(245, 241, 232, 0.55);
    --tl-on-dark-35:    rgba(245, 241, 232, 0.35);

    /* ============================================
       SEMANTIC ALIASES
    ============================================ */
    /* Surfaces */
    --surface-dark:        var(--tl-teal);
    --surface-dark-deep:   var(--tl-teal-deep);
    --surface-cream:       var(--tl-cream);
    --surface-cream-bright:var(--tl-cream-bright);
    --surface-card:        var(--tl-white);

    /* Text */
    --text-strong:    var(--tl-ink);
    --text-body:      var(--tl-ink);
    --text-soft:      var(--tl-ink-soft);
    --text-on-dark:   var(--tl-cream);
    --text-on-dark-soft: var(--tl-on-dark-70);

    /* Accents */
    --accent-primary:   var(--tl-mint);    /* CTA principal */
    --accent-hover:     var(--tl-lime);    /* hover du CTA (mint -> lime) */
    --accent-highlight: var(--tl-lime);    /* mots surlignés sur fond dark */
    --accent-scribble:  var(--tl-pink-strong);

    /* Pills (tonalités) */
    --pill-lime: var(--tl-lime);
    --pill-mint: var(--tl-mint);
    --pill-pink: var(--tl-pink);
}

/* ---- typography.css ----
   Titres : Bricolage Grotesque (500–800, négatif letter-spacing)
   Corps  : Inter (400–600)
*/
:root {
    /* ---- Families ---- */
    --font-title: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Weights ---- */
    --fw-regular:  400; /* @kind font */
    --fw-medium:   500; /* @kind font */
    --fw-semibold: 600; /* @kind font */
    --fw-bold:     700; /* @kind font */
    --fw-black:    800; /* @kind font */

    /* ---- Display / titles (Bricolage) ---- */
    /* Hero — énorme, condensé, line-height < 1 */
    --type-hero-size:    clamp(56px, 8vw, 120px);
    --type-hero-lh:      0.92;
    --type-hero-ls:      -0.04em;
    --type-hero-weight:  var(--fw-black);

    /* Titre de section */
    --type-title-size:   clamp(36px, 5vw, 64px);
    --type-title-lh:     1.05;
    --type-title-ls:     -0.03em;
    --type-title-weight: var(--fw-bold);

    /* Sous-titre / card title */
    --type-heading-size:   clamp(22px, 2.4vw, 30px);
    --type-heading-lh:     1.15;
    --type-heading-ls:     -0.02em;
    --type-heading-weight: var(--fw-bold);

    /* ---- Body (Inter) ---- */
    --type-body-size:   17px;
    --type-body-lh:     1.65;
    --type-lead-size:   clamp(18px, 2vw, 20px);  /* intro de section */
    --type-small-size:  14px;
    --type-small-lh:    1.55;

    /* ---- Kicker / eyebrow ---- */
    --type-kicker-size:   12px;
    --type-kicker-ls:     0.12em;
    --type-kicker-weight: var(--fw-semibold);
    --type-kicker-transform: uppercase;
}

/* ---- spacing.css ---- */
:root {
    /* ---- Spacing scale (4px base) ---- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Rythme vertical des sections (fluide) */
    --space-section: clamp(100px, 14vw, 160px);

    /* ---- Layout ---- */
    --max-width:        1200px;
    --max-width-narrow: 780px;
    --gutter:           clamp(20px, 4vw, 40px); /* @kind spacing */

    /* ---- Radii ---- */
    --radius:      16px;   /* cartes, boutons carrés */
    --radius-sm:   14px;
    --radius-lg:   24px;   /* grandes cartes, photo */
    --radius-pill: 999px;  /* boutons, pills, tags */
}

/* ---- effects.css ---- */
:root {
    /* ---- Easing ---- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */    /* décélération douce, standard */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* léger rebond, flèches/icônes */

    /* ---- Transitions ---- */
    --transition:      250ms var(--ease-out);
    --transition-slow: 400ms var(--ease-out);

    /* ---- Shadows ---- */
    /* Cartes claires au survol (hover lift) */
    --shadow-card:   0 20px 60px rgba(15, 59, 64, 0.10), 0 0 0 1px rgba(15, 59, 64, 0.06);
    --shadow-soft:   0 16px 40px rgba(15, 59, 64, 0.08);
    /* CTA mint */
    --shadow-mint:   0 12px 32px rgba(61, 224, 180, 0.30);
    /* Photo / surfaces sombres */
    --shadow-dark:   0 40px 80px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(245, 241, 232, 0.06);
    --shadow-modal:  0 24px 60px rgba(0, 0, 0, 0.30);

    /* ---- Hero ambient glow (radial accents) ---- */
    --glow-hero:
        radial-gradient(ellipse 80% 60% at 10% 30%, rgba(61, 224, 180, 0.10), transparent),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(217, 242, 106, 0.07), transparent),
        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(245, 182, 204, 0.04), transparent); /* @kind other */

    /* ---- Social gradient (posts LinkedIn) : bleu -> rose grainé ---- */
    --gradient-social: linear-gradient(140deg, #3E6FA8 0%, #8E9DC0 38%, #E7B9C3 70%, #2E5E9E 100%); /* @kind color */

    /* ---- Noise overlay (data-URI fractal) ---- */
    --noise-uri: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); /* @kind other */
}