/*
 * tokens.css — Source de vérité des tokens de design Kivi
 *
 * Ce fichier est la SEULE source à modifier pour changer couleurs, typographie
 * ou espacements. Il est importé par :
 *   - design-system-kivi/app/globals.css  (Storybook)
 *   - frontend/app/globals.css            (Application)
 *
 * Format HSL sans wrapper : H S% L%  →  utilisé via hsl(var(--token))
 */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./public/fonts/Sora-400.ttf") format("truetype");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./public/fonts/Sora-600.ttf") format("truetype");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./public/fonts/Sora-700.ttf") format("truetype");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("./public/fonts/hanken-grotesk-latin.woff2") format("woff2");
}

:root {
    /* ── Typographie ──────────────────────────────────────────────── */
    --font-ui-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-sans: var(--font-ui-sans);
    --font-heading: "Sora", var(--font-ui-sans);

    /* ── Scale system phi (φ = 1.618) ─────────────────────────────── */
    --phi: 1.618;

    /* Spacing — progression géométrique autour de 1rem */
    --space-3xs: 0.236rem;   /* 1/φ³  ≈ 3.8px  */
    --space-2xs: 0.382rem;   /* 1/φ²  ≈ 6.1px  */
    --space-xs:  0.618rem;   /* 1/φ   ≈ 9.9px  */
    --space-sm:  0.786rem;   /* 1/√φ  ≈ 12.6px */
    --space-md:  1rem;        /* base  = 16px    */
    --space-lg:  1.618rem;   /* φ     ≈ 25.9px */
    --space-xl:  2.618rem;   /* φ²    ≈ 41.9px */
    --space-2xl: 4.236rem;   /* φ³    ≈ 67.8px */
    --space-3xl: 6.854rem;   /* φ⁴    ≈ 109.7px */

    /* Typography — scale phi à partir de body = 1rem */
    --kivi-text-hero:          3.33rem;   /* φ^2.5 ≈ 53.3px */
    --kivi-text-display:       2.618rem;  /* φ²    ≈ 41.9px */
    --kivi-text-display-sm:    2.058rem;  /* φ^1.5 ≈ 32.9px */
    --kivi-text-page-title:    1.618rem;  /* φ     ≈ 25.9px */
    --kivi-text-section-title: 1.434rem;  /* φ^¾   ≈ 22.9px */
    --kivi-text-card-title:    1.272rem;  /* √φ    ≈ 20.4px */
    --kivi-text-callout:       1.128rem;  /* φ^¼   ≈ 18px   */
    --kivi-text-body:          1rem;       /* base  = 16px    */
    --kivi-text-body-sm:       0.876rem;  /* 1/φ^¼ ≈ 14px   */
    --kivi-text-label:         0.786rem;  /* 1/√φ  ≈ 12.6px */
    --kivi-text-caption:       0.725rem;  /* 1/φ^¾ ≈ 11.6px */

    /* ── Maia style — Taupe base, Green theme (Kivi) ──────────────── */
    --background: 77.1429 36.8421% 96.2745%;
    --foreground: 152.5424 83.0986% 13.9216%;
    --card: 48 100% 99.0196%;
    --card-foreground: 152.5424 83.0986% 13.9216%;
    --popover: 48 100% 99.0196%;
    --popover-foreground: 152.5424 83.0986% 13.9216%;
    --primary: 152.5424 83.0986% 13.9216%;
    --primary-foreground: 48 100% 99.0196%;
    --secondary: 71.3208 71.6216% 70.9804%;
    --secondary-foreground: 152.5424 83.0986% 13.9216%;
    --muted: 77.1429 36.8421% 96.2745%;
    --muted-foreground: 141 11.1111% 35.2941%;
    --accent: 71.3208 71.6216% 70.9804%;
    --accent-foreground: 152.5424 83.0986% 13.9216%;
    --destructive: 357.2 100% 45.3%;
    --destructive-foreground: 0 0% 100%;
    --border: 255.7895 26.7606% 86.0784%;
    --input: 255.7895 26.7606% 86.0784%;
    --ring: 152.5424 83.0986% 13.9216%;
    --chart-1: 18 100% 48%;
    --chart-2: 174.7 100% 29.5%;
    --chart-3: 195.8 72.1% 22.9%;
    --chart-4: 43.6 100% 50%;
    --chart-5: 36.3 100% 49.7%;
    --radius: 0.618rem;
    --sidebar: 48 100% 99.0196%;
    --sidebar-foreground: 152.5424 83.0986% 13.9216%;
    --sidebar-primary: 152.5424 83.0986% 13.9216%;
    --sidebar-primary-foreground: 48 100% 99.0196%;
    --sidebar-accent: 71.3208 71.6216% 70.9804%;
    --sidebar-accent-foreground: 152.5424 83.0986% 13.9216%;
    --sidebar-border: 255.7895 26.7606% 86.0784%;
    --sidebar-ring: 152.5424 83.0986% 13.9216%;

    /* ── Tokens Kivi étendus ───────────────────────────────────────── */

    /* Brand */
    --kivi-brand-light: 147 45% 93%;
    --kivi-brand-hover: 147 69% 22%;
    --kivi-family-soiree-bg: 42 70% 94%;
    --kivi-family-soiree-border: 42 35% 77%;
    --kivi-family-soiree-fg: 152 83% 14%;
    --kivi-forest: 152.5424 83.0986% 13.9216%;
    --kivi-forest-foreground: 48 100% 99.0196%;
    --kivi-cream: 48 100% 99.0196%;
    --kivi-cream-border: 255.7895 26.7606% 86.0784%;
    --kivi-interactive-hover-soft-bg: 71.3208 71.6216% 70.9804%;
    --kivi-interactive-hover-soft-border: 70 55% 58%;
    --kivi-interactive-pressed-bg: 70 62% 64%;
    --kivi-interactive-focus-forest: 152 83% 14%;
    --kivi-interactive-focus-cream: 42 70% 94%;
    --kivi-text-subtle: 141 11.1111% 35.2941%;

    /* Sémantiques */
    --kivi-success: 142 60% 36%;
    --kivi-success-bg: 142 50% 93%;
    --kivi-success-fg: 142 60% 20%;
    --kivi-warning: 36 90% 50%;
    --kivi-warning-bg: 36 90% 93%;
    --kivi-warning-fg: 36 90% 25%;
    --kivi-info: 211 75% 44%;
    --kivi-info-bg: 211 70% 93%;
    --kivi-info-fg: 211 75% 22%;

    /* Badges métier */
    --kivi-badge-activite-bg: 147 45% 90%;
    --kivi-badge-activite-fg: 147 69% 20%;
    --kivi-badge-evenement-bg: 211 65% 90%;
    --kivi-badge-evenement-fg: 211 75% 22%;
    --kivi-badge-gratuit-bg: 142 50% 90%;
    --kivi-badge-gratuit-fg: 142 60% 22%;
    --kivi-badge-confirme-bg: 147 69% 28%;
    --kivi-badge-confirme-fg: 0 0% 100%;
    --kivi-badge-ce-soir-bg: 36 90% 90%;
    --kivi-badge-ce-soir-fg: 36 90% 22%;
    --kivi-badge-petit-groupe-bg: 270 45% 90%;
    --kivi-badge-petit-groupe-fg: 270 50% 28%;
    --kivi-badge-debutant-bg: 174 45% 88%;
    --kivi-badge-debutant-fg: 174 60% 22%;

    /* Tags de famille thematique */
    --kivi-family-loisirs-bg: 262 82% 94%;
    --kivi-family-loisirs-fg: 262 78% 34%;
    --kivi-family-loisirs-border: 262 65% 76%;
    --kivi-family-sport-bg: 145 56% 91%;
    --kivi-family-sport-fg: 147 70% 25%;
    --kivi-family-sport-border: 145 48% 75%;
    --kivi-family-culture-bg: 214 88% 93%;
    --kivi-family-culture-fg: 214 76% 34%;
    --kivi-family-culture-border: 214 70% 76%;
    --kivi-family-gastronomie-bg: 29 96% 92%;
    --kivi-family-gastronomie-fg: 25 90% 32%;
    --kivi-family-gastronomie-border: 29 86% 74%;
    --kivi-family-creativite-bg: 328 82% 94%;
    --kivi-family-creativite-fg: 328 74% 34%;
    --kivi-family-creativite-border: 328 66% 77%;
    --kivi-family-nature-bg: 88 52% 90%;
    --kivi-family-nature-fg: 92 54% 25%;
    --kivi-family-nature-border: 88 42% 72%;
    --kivi-family-social-bg: 48 98% 90%;
    --kivi-family-social-fg: 43 92% 29%;
    --kivi-family-social-border: 48 88% 70%;
    --kivi-family-tech-bg: 190 84% 91%;
    --kivi-family-tech-fg: 191 84% 27%;
    --kivi-family-tech-border: 190 70% 72%;
    --kivi-family-autre-bg: 215 18% 91%;
    --kivi-family-autre-fg: 220 18% 32%;
    --kivi-family-autre-border: 215 14% 74%;

    /* Surfaces discovery / sorties */
    --kivi-discovery-page-bg: var(--background);
    --kivi-discovery-surface-bg: 48 100% 99.0196%;
    --kivi-discovery-surface-muted-bg: 77.1429 36.8421% 96.2745%;
    --kivi-discovery-surface-border: 255.7895 26.7606% 86.0784%;
    --kivi-discovery-ink-soft: 141 11.1111% 35.2941%;
    --kivi-discovery-surface-shadow: 0 18px 40px rgba(22, 34, 28, 0.06);

    /* Surfaces compactes / contrôles */
    --kivi-control-bg: 0 0% 100%;
    --kivi-control-bg-soft: 77.1429 36.8421% 96.2745%;
    --kivi-control-bg-hover: 71.3208 71.6216% 70.9804%;
    --kivi-control-bg-pressed: var(--kivi-interactive-pressed-bg);
    --kivi-control-border: var(--kivi-cream-border);
    --kivi-control-border-hover: 32 22% 78%;
    --kivi-control-border-active: var(--primary);
    --kivi-control-ink: var(--foreground);
    --kivi-control-ink-muted: 141 11.1111% 35.2941%;
    --kivi-control-shadow: 0 7px 18px hsla(150, 22%, 16%, 0.055);
    --kivi-control-shadow-hover: 0 12px 24px hsla(147, 100%, 9%, 0.14);
    --kivi-control-shadow-strong: 0 14px 32px hsla(147, 30%, 15%, 0.16);
    --kivi-control-inset-highlight: inset 0 1px 0 hsla(0, 0%, 100%, 0.82);
    --kivi-overlay-hover-bg: 42 70% 94%;
    --kivi-overlay-hover-subtle-opacity: 0.08;
    --kivi-nav-switch-bg: 152 48% 20%;
    --kivi-nav-switch-active-bg: 152 45% 17%;
    --kivi-footer-border: 146 33% 26%;
    --kivi-app-footer-height: 4.75rem;
    --kivi-illustration-drop-shadow: 0 18px 28px hsla(144, 31%, 11%, 0.12);
    --kivi-empty-state-padding-y: var(--space-lg);
    --kivi-empty-state-padding-y-compact: var(--space-sm);
    --kivi-empty-state-section-offset: var(--space-sm);
    --kivi-empty-state-viewport-min-height: max(22rem, calc(100dvh - 18rem));
    --kivi-empty-state-search-viewport-min-height: max(20rem, calc(100dvh - 20.5rem));
    --kivi-empty-state-wide-max-width: 58rem;
    --kivi-empty-state-gap: var(--space-lg);
    --kivi-empty-state-illustration-sm: 11rem;
    --kivi-empty-state-illustration-md: 14rem;
    --kivi-empty-state-illustration-lg: 16rem;

    /* Carte / map */
    --kivi-map-bg: 44 13% 91%;
    --kivi-map-land: #fbf9f3;
    --kivi-map-park: #e6f0e4;
    --kivi-map-wood: #e2ede1;
    --kivi-map-water: #c9dede;
    --kivi-map-residential: #fbfaf6;
    --kivi-map-building: #f2eee6;
    --kivi-map-waterway: #bad5d1;
    --kivi-map-road-minor: #ffffff;
    --kivi-map-road-casing: #f2efe8;
    --kivi-map-road-inner: #ece8de;
    --kivi-map-road-subtle: #eeeae1;
    --kivi-map-motorway-inner: #e5e1d7;
    --kivi-map-motorway-subtle: #e9e5dc;
    --kivi-map-transit: #ddd9d1;
    --kivi-map-rail-service: #e2ded6;
    --kivi-map-rail: #dcd8d0;
    --kivi-map-label-soft: #7c847e;
    --kivi-map-label-town: #69786f;
    --kivi-map-label-city: #47685b;
    --kivi-map-location: hsl(var(--kivi-forest));
    --kivi-map-location-halo: hsl(var(--kivi-interactive-hover-soft-bg));
    --kivi-map-marker-stroke: hsl(var(--kivi-cream));
    --kivi-map-control-bg: 0 0% 100%;
    --kivi-map-control-border: 220 13% 91%;
    --kivi-map-control-radius: 1.125rem;
    --kivi-map-control-size: 2.875rem;
    --kivi-map-control-native-margin: 10px;
    --kivi-map-control-offset-mobile: 0.875rem;
    --kivi-map-control-offset-desktop-x: 1.125rem;
    --kivi-map-control-offset-desktop-bottom: 6.875rem;
    --kivi-map-control-offset-xl-bottom: 3.5rem;
    --kivi-map-control-shadow: 0 1px 2px hsla(220, 43%, 11%, 0.04), 0 10px 24px hsla(220, 43%, 11%, 0.14);
    --kivi-map-popup-border: var(--kivi-cream-border);
    --kivi-map-popup-bg: 0 0% 100%;
    --kivi-map-popup-radius: 1.375rem;
    --kivi-map-popup-shadow: 0 1px 2px hsla(220, 43%, 11%, 0.04), 0 18px 38px hsla(220, 43%, 11%, 0.18);
    --kivi-selection-bg: 38 72% 89%;
    --kivi-selection-ink: 160 47% 12%;

    /* Wizard sortie */
    --kivi-wizard-page-bg: var(--background);
    --kivi-wizard-panel-bg: var(--kivi-discovery-surface-bg);
    --kivi-wizard-panel-border: var(--kivi-discovery-surface-border);
    --kivi-wizard-accent-bg: var(--kivi-discovery-surface-muted-bg);
    --kivi-wizard-accent-border: var(--kivi-discovery-surface-border);
    --kivi-wizard-preview-bg: var(--kivi-discovery-surface-muted-bg);
    --kivi-wizard-preview-border: var(--kivi-discovery-surface-border);
    --kivi-wizard-ink-soft: var(--kivi-discovery-ink-soft);

    /* Ombres */
    --kivi-shadow-sm: 0 1px 3px hsla(147, 30%, 15%, 0.08);
    --kivi-shadow-md: 0 4px 12px hsla(147, 30%, 15%, 0.12);
    --kivi-shadow-lg: 0 8px 24px hsla(147, 30%, 15%, 0.18);

    /* Motion Kivi */
    --kivi-motion-duration-fast: 120ms;
    --kivi-motion-duration-selection: 140ms;
    --kivi-motion-duration-quick: 180ms;
    --kivi-motion-duration-standard: 240ms;
    --kivi-motion-duration-expressive: 360ms;
    --kivi-motion-duration-hero: 450ms;
    --kivi-motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --kivi-motion-ease-hero: cubic-bezier(0.16, 1, 0.3, 1);

    /* Toast / Snackbar */
    --kivi-toast-z-index: 160;
    --kivi-toast-radius: 0.875rem;
    --kivi-toast-shadow: 0 14px 32px hsla(147, 30%, 15%, 0.24);
    --kivi-toast-success-bg: 142 50% 93%;
    --kivi-toast-success-fg: 142 60% 20%;
    --kivi-toast-success-border: 142 45% 84%;
    --kivi-toast-info-bg: 211 70% 93%;
    --kivi-toast-info-fg: 211 75% 22%;
    --kivi-toast-info-border: 211 60% 84%;
    --kivi-toast-error-bg: 357 100% 95%;
    --kivi-toast-error-fg: 357 70% 28%;
    --kivi-toast-error-border: 357 70% 86%;
  }

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 147.3 64.4% 34.1%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 358.8 69.3% 30.1%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 147.3 64.4% 34.1%;
  --chart-1: 225.3 84.1% 49%;
  --chart-2: 159.7 100% 36.9%;
  --chart-3: 36.3 100% 49.7%;
  --chart-4: 273.3 100% 63.8%;
  --chart-5: 345.3 100% 56.2%;
  --sidebar: 0 0% 9.1%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-primary: 147.3 64.4% 34.1%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 14.9%;
  --sidebar-accent-foreground: 0 0% 98%;
  --sidebar-border: 0 0% 14.9%;
  --sidebar-ring: 147.3 64.4% 34.1%;
}

/* Two independently keyboard-accessible handles; only thumbs receive pointer input. */
.kivi-time-range { pointer-events: none; }
.kivi-time-range:focus-visible { outline: 2px solid hsl(var(--kivi-forest)); outline-offset: 2px; border-radius: 6px; }
.kivi-time-range::-webkit-slider-thumb { pointer-events: auto; appearance: none; width: 22px; height: 22px; border: 2px solid hsl(var(--kivi-forest)); border-radius: 50%; background: hsl(var(--kivi-cream)); cursor: grab; }
.kivi-time-range::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border: 2px solid hsl(var(--kivi-forest)); border-radius: 50%; background: hsl(var(--kivi-cream)); cursor: grab; }