/*
 * Tokens design system Sailoé.
 * Valeurs CSS dérivées de l'audit design sailoe.com (analysis/refonte/sailoe-design-audit.md).
 * Identité : cyan brand #1C9BDB + sand #E0DDD6 + anchor #262626.
 */

:root {
	/* === COULEURS BRAND (signature Sailoé) === */
	/* Cyan brand — le marqueur d'identité, présent 38× sur sailoe.com (CTAs, pastille prix, point après titres) */
	--sl-color-brand:        #1C9BDB;
	--sl-color-brand-dark:   #1480b8;
	--sl-color-brand-darker: #0f6692;
	--sl-color-brand-light:  #5cb9e6;
	--sl-color-brand-soft:   #d5edf8;
	--sl-color-brand-pale:   #eef7fc;

	/* Sand — beige sable, fond breadcrumb + bandeaux réassurance */
	--sl-color-sand:         #E0DDD6;
	--sl-color-sand-light:   #ebe9e3;
	--sl-color-sand-dark:    #c8c5bd;

	/* Anchor — gris très foncé, footer + cards témoignages */
	--sl-color-anchor:       #262626;
	--sl-color-anchor-soft:  #383838;
	--sl-color-anchor-dark:  #1a1a1a;

	/* Mint — vert d'eau accent, icônes lit/personnes cards bateau + Instagram */
	--sl-color-mint:         #25aeaa;
	--sl-color-mint-dark:    #1d8d8a;

	/* === NEUTRES === */
	--sl-color-ink-900:   #1a1a1a;
	--sl-color-ink-800:   #262626;
	--sl-color-ink-700:   #383838;     /* body text Sailoé */
	--sl-color-ink-600:   #525252;
	--sl-color-ink-500:   #6c788f;
	--sl-color-ink-400:   #a4a19a;     /* labels caractéristiques fiche bateau */
	--sl-color-ink-300:   #c3c0b9;     /* bullets équipements */
	--sl-color-ink-200:   #dfe3eb;
	--sl-color-ink-100:   #ecedf2;
	--sl-color-ink-50:    #f6f7fa;

	--sl-color-white:     #ffffff;
	--sl-color-black:     #000000;

	/* === SÉMANTIQUES === */
	--sl-color-bg:        var(--sl-color-white);
	--sl-color-bg-alt:    var(--sl-color-sand);
	--sl-color-bg-soft:   var(--sl-color-sand-light);
	--sl-color-bg-dark:   var(--sl-color-anchor);
	--sl-color-text:      var(--sl-color-ink-700);
	--sl-color-text-soft: var(--sl-color-ink-500);
	--sl-color-text-mute: var(--sl-color-ink-400);
	--sl-color-link:      var(--sl-color-brand);
	--sl-color-link-hover: var(--sl-color-brand-dark);
	--sl-color-border:    rgba(56, 56, 56, 0.12);
	--sl-color-border-strong: rgba(56, 56, 56, 0.24);

	--sl-color-success:   #1f7a3a;
	--sl-color-warning:   #b87613;
	--sl-color-danger:    #b2331f;

	/* === TYPOGRAPHIE — alignée brand book Sailoé HD E2 (sans-serif premium uniquement) === */
	/* Headings + body : Manrope (geometric sans-serif premium, matche brand book) */
	--sl-font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Display headings : Manrope ExtraBold (titres dramatiques avec point bleu signature) */
	--sl-font-display: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
	/* Subtitle uppercase letterspaced : Manrope SemiBold (eyebrows et tags) */
	--sl-font-eyebrow: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
	/* Mono pour data/code */
	--sl-font-mono:    "JetBrains Mono", Consolas, Menlo, monospace;
	/* Serif fallback (non utilisé en V2 — brand book = 100% sans-serif) */
	--sl-font-serif:   "Manrope", Georgia, serif;

	--sl-fs-xs:    0.75rem;   /* 12 */
	--sl-fs-sm:    0.875rem;  /* 14 */
	--sl-fs-base:  1rem;      /* 16 */
	--sl-fs-md:    1.125rem;  /* 18 */
	--sl-fs-lg:    1.25rem;   /* 20 */
	--sl-fs-xl:    1.5rem;    /* 24 */
	--sl-fs-2xl:   1.875rem;  /* 30 */
	--sl-fs-3xl:   2.25rem;   /* 36 */
	--sl-fs-4xl:   3rem;      /* 48 */
	--sl-fs-5xl:   3.75rem;   /* 60 */
	--sl-fs-6xl:   4.5rem;    /* 72 */

	--sl-fw-regular: 400;
	--sl-fw-medium:  500;
	--sl-fw-semi:    600;
	--sl-fw-bold:    700;
	--sl-fw-black:   800;

	--sl-lh-tight:  1.15;
	--sl-lh-snug:   1.3;
	--sl-lh-normal: 1.5;
	--sl-lh-loose:  1.7;

	--sl-tracking-tight: -0.02em;
	--sl-tracking-normal: 0;
	--sl-tracking-wide:  0.06em;
	--sl-tracking-wider: 0.3em;     /* HelveticaNeue Thin uppercase, switchers TopBar */
	--sl-tracking-widest: 0.5em;    /* H1 sous-titre hero scénique */

	/* === ESPACEMENTS === */
	--sl-space-1:  0.25rem;
	--sl-space-2:  0.5rem;
	--sl-space-3:  0.75rem;
	--sl-space-4:  1rem;
	--sl-space-5:  1.25rem;
	--sl-space-6:  1.5rem;
	--sl-space-8:  2rem;
	--sl-space-10: 2.5rem;
	--sl-space-12: 3rem;
	--sl-space-16: 4rem;
	--sl-space-20: 5rem;
	--sl-space-24: 6rem;
	--sl-space-32: 8rem;

	/* === LAYOUT === */
	--sl-container-max:    1320px;
	--sl-container-narrow: 880px;
	--sl-container-wide:   1480px;
	--sl-gutter:           clamp(1rem, 4vw, 2.5rem);
	--sl-header-h:         96px;

	/* === RADIUS === */
	--sl-radius-sm:   4px;
	--sl-radius-md:   10px;          /* pastille prix Sailoé .Boat-list-price */
	--sl-radius-lg:   20px;
	--sl-radius-xl:   34px;          /* boutons pilule Sailoé .Btn */
	--sl-radius-2xl:  42px;          /* cards témoignages Sailoé .Bloc--testimony */
	--sl-radius-full: 9999px;

	/* === OMBRES === */
	--sl-shadow-sm:  0 1px 2px 0 rgba(38, 38, 38, 0.06);
	--sl-shadow-md:  0 4px 14px -2px rgba(38, 38, 38, 0.10), 0 2px 6px -2px rgba(38, 38, 38, 0.06);
	--sl-shadow-lg:  0 18px 40px -10px rgba(38, 38, 38, 0.16), 0 6px 14px -4px rgba(38, 38, 38, 0.08);
	--sl-shadow-xl:  0 32px 72px -20px rgba(38, 38, 38, 0.24);
	--sl-shadow-brand: 0 12px 28px -10px rgba(28, 155, 219, 0.45);

	/* === ANIMATIONS === */
	--sl-ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--sl-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--sl-duration:    250ms;
	--sl-duration-slow: 500ms;

	/* === Z-INDEX === */
	--sl-z-base:        0;
	--sl-z-raised:      10;
	--sl-z-rail:        50;          /* rail flottant 4 icônes contact */
	--sl-z-header:      100;
	--sl-z-overlay:     500;
	--sl-z-modal:       1000;
	--sl-z-toast:       9999;
}