/* ============================================================
   Kolibri — Design Tokens
   Inspiré des couleurs du martin-pêcheur
   ============================================================ */

:root {
  /* ── Couleurs principales ─────────────────────────────── */
  --c-primary:        #0A7A8C;
  --c-primary-light:  #0D9BAF;
  --c-primary-dark:   #076070;
  --c-primary-05:     rgba(10, 122, 140, 0.05);
  --c-primary-10:     rgba(10, 122, 140, 0.10);
  --c-primary-20:     rgba(10, 122, 140, 0.20);

  --c-accent:         #E8874A;
  --c-accent-light:   #F0A070;
  --c-accent-dark:    #C8673A;
  --c-accent-10:      rgba(232, 135, 74, 0.10);

  /* ── Surfaces & fonds ────────────────────────────────── */
  --c-bg:             #F4F9FB;
  --c-surface:        #FFFFFF;
  --c-surface-raised: #FFFFFF;
  --c-border:         #DFF0F4;
  --c-border-strong:  #B8DAE2;

  /* ── Texte ────────────────────────────────────────────── */
  --c-text:           #1A2B32;
  --c-text-secondary: #4A7A88;
  --c-text-muted:     #8AADB8;
  --c-text-on-primary:#FFFFFF;

  /* ── États ────────────────────────────────────────────── */
  --c-success:        #2DA771;
  --c-success-10:     rgba(45, 167, 113, 0.10);
  --c-warning:        #F5A623;
  --c-warning-10:     rgba(245, 166, 35, 0.10);
  --c-danger:         #E05252;
  --c-danger-10:      rgba(224, 82, 82, 0.10);

  /* ── Glassmorphism ────────────────────────────────────── */
  --glass-bg:         rgba(255, 255, 255, 0.55);
  --glass-bg-strong:  rgba(255, 255, 255, 0.75);
  --glass-bg-subtle:  rgba(255, 255, 255, 0.35);
  --glass-border:     rgba(255, 255, 255, 0.60);
  --glass-border-sm:  rgba(255, 255, 255, 0.35);
  --glass-blur:       blur(24px);
  --glass-blur-sm:    blur(12px);
  --glass-blur-lg:    blur(40px);
  --glass-shadow:     0 8px 32px rgba(10, 122, 140, 0.12), 0 1px 0 rgba(255,255,255,0.8) inset;
  --glass-shadow-lg:  0 16px 48px rgba(10, 122, 140, 0.16), 0 1px 0 rgba(255,255,255,0.9) inset;

  /* ── Gradients ────────────────────────────────────────── */
  --grad-primary:     linear-gradient(135deg, #0A7A8C 0%, #0D9BAF 100%);
  --grad-accent:      linear-gradient(135deg, #E8874A 0%, #F0A070 100%);
  --grad-bg:          linear-gradient(160deg, #b8dfe8 0%, #d8eff4 30%, #f4f9fb 60%, #fde8d5 85%, #fbd5bc 100%);
  --grad-card:        linear-gradient(145deg, rgba(255,255,255,0.75) 0%, rgba(240,252,255,0.55) 100%);

  /* ── Typographie ──────────────────────────────────────── */
  --font:             'Plus Jakarta Sans', system-ui, sans-serif;
  --fs-xs:            0.6875rem;  /* 11px */
  --fs-sm:            0.8125rem;  /* 13px */
  --fs-base:          0.9375rem;  /* 15px */
  --fs-md:            1rem;       /* 16px */
  --fs-lg:            1.125rem;   /* 18px */
  --fs-xl:            1.25rem;    /* 20px */
  --fs-2xl:           1.5rem;     /* 24px */
  --fs-3xl:           1.875rem;   /* 30px */
  --fs-4xl:           2.25rem;    /* 36px */

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  --lh-tight:         1.2;
  --lh-snug:          1.4;
  --lh-normal:        1.6;

  /* ── Espacement ───────────────────────────────────────── */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */

  /* ── Rayons ───────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 9999px;

  /* ── Ombres ───────────────────────────────────────────── */
  --shadow-xs:  0 1px 3px  rgba(10, 122, 140, 0.06);
  --shadow-sm:  0 2px 8px  rgba(10, 122, 140, 0.09);
  --shadow-md:  0 4px 16px rgba(10, 122, 140, 0.12);
  --shadow-lg:  0 8px 32px rgba(10, 122, 140, 0.14);
  --shadow-xl:  0 16px 48px rgba(10, 122, 140, 0.16);

  /* ── Navigation ───────────────────────────────────────── */
  --nav-h:    68px;
  --header-h: 64px;

  /* ── Transitions ──────────────────────────────────────── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:     120ms var(--ease);
  --t-base:     220ms var(--ease);
  --t-slow:     380ms var(--ease);
  --t-spring:   400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}