/* ============================================================
   Technologia — Design Tokens (Couche 0 / Fondations)
   Source : "Technologia - Home Sombre v2" (handoff design).
   Convention : toutes les variables sont préfixées --tec-* pour
   NE JAMAIS écraser les variables de Blocksy ni de WooCommerce.
   Ce fichier ne rend rien de visible seul : il est consommé par
   les blocs tec/… et l'habillage Woo des couches suivantes.
   ============================================================ */

:root {
  /* ---- Couleurs de marque (bleus logo) ---- */
  --tec-navy:        #273F7E;
  --tec-navy-700:    #1E3266;
  --tec-navy-900:    #16244A;
  --tec-sky:         #4BA9DE;
  --tec-sky-600:     #3593CE;
  --tec-sky-700:     #2C7DB0;
  --tec-steel:       #4695BF;

  /* ---- Agent (signal cyan) ---- */
  --tec-agent-signal: #00C2FF;   /* cyan pur : anneaux/live/focus, jamais derrière texte blanc */
  --tec-agent-600:    #00A6E0;
  --tec-agent-700:    #0B7BA6;
  --tec-agent-ink:    #0B7BA6;   /* cyan-encre : texte/icône cyan sur fond clair (contraste AA) */
  --tec-agent-tint:   #E2F7FF;
  --tec-agent-tint-2: #F0FBFF;
  --tec-agent-glow:   rgba(0, 194, 255, 0.30);
  --tec-agent-line:   rgba(0, 194, 255, 0.45);
  --tec-agent-halo:      radial-gradient(circle, rgba(0,194,255,0.22) 0%, rgba(0,194,255,0) 70%);
  --tec-agent-grad-soft: linear-gradient(135deg, rgba(0,194,255,0.14), rgba(75,169,222,0.10));

  /* ---- Fond Home sombre premium ---- */
  --tec-home-bg:     #070C16;

  /* ---- Surfaces claires (Catalogue/Produit/Panier/Checkout) ---- */
  --tec-white:          #FFFFFF;
  --tec-surface-card:   #FFFFFF;
  --tec-surface-tint:   #EAF1F8;
  --tec-surface-tint-2: #F4F8FC;

  /* ---- Encre / texte ---- */
  --tec-ink-900:     #0A0A0A;
  --tec-ink-700:     #2B2F36;
  --tec-ink-500:     #5A626E;
  --tec-ink-400:     #8A929E;
  --tec-ink-300:     #B6BCC6;
  --tec-text-body:   var(--tec-ink-700);
  --tec-text-muted:  var(--tec-ink-500);

  /* ---- Lignes / bordures ---- */
  --tec-line-200:    #E7EBF0;
  --tec-line-300:    #D8DEE6;
  --tec-border-hair: var(--tec-line-200);
  --tec-border-card: var(--tec-line-300);

  /* ---- Statuts (stock binaire, alertes) ---- */
  --tec-success:      #1E9E62;
  --tec-success-tint: #E6F4EC;
  --tec-danger:       #D2483A;
  --tec-danger-tint:  #FBEAE8;
  --tec-info:         #2C7DB0;
  --tec-info-tint:    #E6F1F9;
  --tec-warning:      #C9821A;   /* "Sur commande" / attention */

  /* ---- Canaux (communication uniquement — le vert ne domine jamais l'identité) ---- */
  --tec-ch-whatsapp:      #25D366;
  --tec-ch-whatsapp-600:  #1EB855;
  --tec-ch-whatsapp-tint: #E7F9EE;
  --tec-ch-messenger:      #0084FF;
  --tec-ch-messenger-tint: #E4F1FF;
  --tec-ch-instagram:      #DD2A7B;
  --tec-ch-instagram-tint: #FCE9F1;
  --tec-ch-instagram-grad: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 70%, #515BD4);
  --tec-ch-facebook:       #1877F2;
  --tec-ch-facebook-tint:  #E7F0FE;

  /* ---- Dégradé d'action (CTA) ---- */
  --tec-cta-grad: linear-gradient(135deg, #4BA9DE, #273F7E);

  /* ---- Typographie ---- */
  --tec-font-display: 'Sora', 'Hanken Grotesk', system-ui, sans-serif;   /* titres */
  --tec-font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* corps/UI */
  --tec-font-price:   'Hanken Grotesk', system-ui, sans-serif;           /* prix (tabular-nums) */
  --tec-fw-regular:   400;
  --tec-fw-medium:    500;
  --tec-fw-semibold:  600;
  --tec-fw-bold:      700;
  --tec-fw-extrabold: 800;

  /* Échelle typographique fluide (mobile → desktop via clamp) */
  --tec-fs-hero:    clamp(2.5rem, 1.6rem + 4.5vw, 4rem);
  --tec-fs-display: clamp(2.25rem, 1.6rem + 3.25vw, 3.25rem);
  --tec-fs-h1:      clamp(1.75rem, 1.4rem + 1.75vw, 2.25rem);
  --tec-fs-h2:      clamp(1.375rem, 1.15rem + 1.15vw, 1.75rem);
  --tec-fs-h3:      clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --tec-fs-body:    1rem;
  --tec-fs-sm:      0.875rem;
  --tec-fs-xs:      0.75rem;

  --tec-lh-tight:   1.1;
  --tec-lh-snug:    1.25;
  --tec-lh-normal:  1.5;
  --tec-ls-tight:  -0.02em;
  --tec-ls-snug:   -0.01em;
  --tec-ls-normal:  0em;
  --tec-ls-wide:    0.04em;
  --tec-ls-wider:   0.08em;

  /* ---- Rayons ---- */
  --tec-radius-sm:   8px;
  --tec-radius-md:   12px;   /* boutons / inputs */
  --tec-radius-lg:   16px;   /* cartes */
  --tec-radius-xl:   24px;
  --tec-radius-2xl:  32px;   /* panneaux */
  --tec-radius-pill: 999px;  /* chips / barre agent */

  /* ---- Espacement (échelle 8pt) ---- */
  --tec-space-1:  4px;
  --tec-space-2:  8px;
  --tec-space-3:  12px;
  --tec-space-4:  16px;
  --tec-space-5:  20px;
  --tec-space-6:  24px;
  --tec-space-8:  32px;
  --tec-space-10: 40px;
  --tec-space-12: 48px;
  --tec-space-16: 64px;
  --tec-space-20: 80px;
  --tec-space-24: 96px;
  --tec-section-y:     clamp(48px, 6vw, 80px);   /* respiration verticale des sections */
  --tec-container-max:  1080px;
  --tec-container-wide: 1200px;
  --tec-gutter:         clamp(20px, 5vw, 32px);

  /* ---- Ombres (froides, teintées navy ; halo cyan pour l'agent/focus) ---- */
  --tec-shadow-xs:        0 1px 2px rgba(39, 63, 126, 0.06);
  --tec-shadow-sm:        0 2px 8px rgba(39, 63, 126, 0.08);
  --tec-shadow-md:        0 6px 20px rgba(39, 63, 126, 0.10);
  --tec-shadow-lg:        0 14px 40px rgba(39, 63, 126, 0.14);
  --tec-shadow-xl:        0 24px 60px rgba(39, 63, 126, 0.16);
  --tec-shadow-signal:    0 0 0 4px rgba(0, 194, 255, 0.22);
  --tec-shadow-signal-lg: 0 10px 30px rgba(0, 194, 255, 0.18);
  --tec-shadow-focus:     0 0 0 3px rgba(75, 169, 222, 0.35);

  /* ---- Mouvement ---- */
  --tec-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --tec-dur-fast:  120ms;
  --tec-dur-base:  200ms;
  --tec-dur-slow:  320ms;
}

/* Accessibilité : respect de prefers-reduced-motion (règle handoff).
   Les animations des blocs tec/… doivent se désactiver ici. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tec-dur-fast: 0ms;
    --tec-dur-base: 0ms;
    --tec-dur-slow: 0ms;
  }
}