/* ==========================================================================
   Matari'i.pf — Design Tokens CSS Custom Properties
   Généré depuis design-tokens.json
   Usage: importer dans le thème WordPress via functions.php ou style.css
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     SHARED COLORS — Base commune aux deux univers
     ----------------------------------------------------------------------- */
  /* Backgrounds allégés — retour réunion 09/04 (Tamara : "trop masculin") */
  --color-bg-dark: #0F2B3D;
  --color-bg-deep: #072838;
  --color-text-light: #FFFFFF;
  --color-text-muted: #B8C6CF;
  --color-overlay-dark: rgba(7, 40, 56, 0.85);

  /* Blocs clairs alternés — retour Romeo 13/04 (pas tout en couleur saison) */
  --color-bg-light: #F5F1E8;        /* blanc cassé chaud (ivoire) */
  --color-bg-light-alt: #EDE7D9;    /* légèrement plus profond pour variation */
  --color-text-on-light: #0F2B3D;   /* texte principal sur fond clair (Ni'a) */
  --color-text-muted-on-light: #3A4B5C;
  /* Accent saison assombri pour contraste sur blocs clairs */
  --color-accent-on-light: #0B5566; /* teal profond — remplace le turquoise vif sur ivoire */

  /* -----------------------------------------------------------------------
     MATARI'I I NI'A — Saison d'abondance (défaut)
     Tons froids : océan, végétation, ciel nocturne
     ----------------------------------------------------------------------- */
  --nia-turquoise: #87FFFF;
  --nia-bleu-profond: #002D45;
  --nia-orange: #FF8D19;
  --nia-vert-vif: #C8FF00;
  --nia-vert-fonce: #1B584B;
  --nia-logo-text: #E8F0F0;
  --nia-leaf-deco: rgba(100, 180, 180, 0.15);

  /* -----------------------------------------------------------------------
     MATARI'I I RARO — Saison d'introspection
     Tons chauds : terre, feu, matières brutes
     ----------------------------------------------------------------------- */
  --raro-gris-mineral: #4A3A30;
  --raro-brun-terre: #4E2318;
  /* Rouge adouci — retour réunion 09/04 (illisible en titre) */
  --raro-rouge-feu: #C75649;
  --raro-orange: #D06B42;
  --raro-beige-mineral: #C8A26E;
  --raro-logo-text: #E5D5B0;
  --raro-leaf-deco: rgba(200, 150, 100, 0.18);

  /* -----------------------------------------------------------------------
     SEMANTIC TOKENS — Thème actif (switchable via JS ou class)
     Par défaut : Ni'a. Surchargé par [data-season="raro"] ou .season-raro
     ----------------------------------------------------------------------- */
  --color-primary: var(--nia-bleu-profond);
  --color-accent: var(--nia-turquoise);
  --color-accent-warm: var(--nia-orange);
  --color-accent-secondary: var(--nia-vert-vif);
  --color-surface: var(--nia-vert-fonce);
  --color-gradient-start: #001520;
  --color-gradient-end: #002D45;
  --color-logo-text: var(--nia-logo-text);
  --color-leaf-deco: var(--nia-leaf-deco);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --font-brand: 'Voltaire Frangela', serif;
  --font-body: 'Montserrat', sans-serif;
  --font-signature: 'Breathing', cursive;

  /* Sizes */
  --text-h1: 3.5rem;
  --text-h2: 2.5rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  /* Line heights */
  --lh-h1: 1.1;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-body: 1.7;

  /* -----------------------------------------------------------------------
     SPACING
     ----------------------------------------------------------------------- */
  --section-py: 6rem;
  --section-py-mobile: 3rem;
  --section-py-hero: 3.5rem;     /* page-hero court : juste titre + lead */
  --container-max: 1200px;
  --container-px: 2rem;
  --grid-gap: 2rem;
  --grid-gap-mobile: 1rem;
  --component-gap: 1.5rem;

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------------
     MOTION SYSTEM
     Easings nommés + durées normalisées. "Pro sheen" : hover rapide,
     reveal lent et retenu, active bref.
     ----------------------------------------------------------------------- */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --dur-slower: 560ms;

  /* Transitions par défaut — utilisées partout dans le CSS existant */
  --transition: all var(--dur-base) var(--ease-out-quad);
  --transition-slow: all var(--dur-slower) var(--ease-out-expo);
  --transition-fast: all var(--dur-fast) var(--ease-out-quad);

  /* -----------------------------------------------------------------------
     SHADOW SYSTEM — multi-layer pour profondeur riche
     Empilement inset-border + outline-ring + soft-elevation.
     Couleur teintée bleu profond (plutôt que noir pur) pour s'intégrer
     dans la palette. Très subtil sur fond ivoire.
     ----------------------------------------------------------------------- */
  --shadow-xs:
    rgba(15, 43, 61, 0.04) 0px 1px 2px 0px,
    rgba(15, 43, 61, 0.03) 0px 1px 1px 0px;

  --shadow-sm:
    rgba(15, 43, 61, 0.06) 0px 0px 0px 1px,
    rgba(15, 43, 61, 0.04) 0px 2px 4px -1px,
    rgba(15, 43, 61, 0.04) 0px 4px 8px -2px;

  --shadow-md:
    rgba(15, 43, 61, 0.07) 0px 0px 0px 1px,
    rgba(15, 43, 61, 0.06) 0px 4px 8px -2px,
    rgba(15, 43, 61, 0.05) 0px 12px 24px -6px;

  --shadow-lg:
    rgba(15, 43, 61, 0.08) 0px 0px 0px 1px,
    rgba(15, 43, 61, 0.08) 0px 8px 16px -4px,
    rgba(15, 43, 61, 0.06) 0px 24px 48px -12px;

  --shadow-xl:
    rgba(15, 43, 61, 0.09) 0px 0px 0px 1px,
    rgba(15, 43, 61, 0.10) 0px 16px 32px -8px,
    rgba(15, 43, 61, 0.08) 0px 40px 80px -16px;

  /* Shadows de saison — glow subtil sur fond sombre */
  --shadow-glow-nia: 0 0 48px rgba(135, 255, 255, 0.10);
  --shadow-glow-raro: 0 0 48px rgba(199, 86, 73, 0.12);

  /* Legacy — conservés pour les usages sur fond sombre (où un shadow
     teinté bleu serait invisible). Les shadows multi-layer ci-dessus
     sont dédiés aux .section--light */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.2);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY MICRO
     ----------------------------------------------------------------------- */
  --tracking-tight: -0.015em;    /* display H1/H2 Voltaire — resserre */
  --tracking-snug: -0.005em;     /* H3 Montserrat */
  --tracking-normal: 0;
  --tracking-wide: 0.05em;       /* déjà utilisé boutons/labels */
  --tracking-wider: 0.12em;      /* caption uppercase */
  --tracking-widest: 0.18em;     /* caption éditorial fort */

  /* Features OpenType activées globalement sur le body */
  --font-features: "kern", "liga", "calt";
  --lh-display: 1.05;            /* plus serré que lh-h1 pour feel éditorial */
}

/* =========================================================================
   SEASON SWITCH — Matari'i i Raro override
   Appliquer data-season="raro" sur <html> ou <body> pour basculer
   ========================================================================= */
[data-season="raro"],
.season-raro {
  --color-primary: var(--raro-brun-terre);
  --color-accent: var(--raro-rouge-feu);
  --color-accent-warm: var(--raro-orange);
  --color-accent-secondary: var(--raro-beige-mineral);
  --color-surface: var(--raro-gris-mineral);
  /* Gradients allégés — retour réunion 09/04 */
  --color-gradient-start: #1E100C;
  --color-gradient-end: #4E2318;
  --color-bg-deep: #1E100C;
  --color-bg-dark: #2A1812;
  --color-overlay-dark: rgba(30, 16, 12, 0.85);
  --color-logo-text: var(--raro-logo-text);
  --color-leaf-deco: var(--raro-leaf-deco);
  /* Blocs clairs tons chauds en mode Raro */
  --color-bg-light: #F7EFE3;
  --color-bg-light-alt: #EFE4D0;
  --color-text-on-light: #2A1612;
  --color-text-muted-on-light: #4E3528;
  /* Accent Raro sur blocs clairs — terracotta foncé, pas le coral vif */
  --color-accent-on-light: #8A3124;
}

/* =========================================================================
   BREAKPOINTS (usage via media queries)
   --bp-mobile: 480px
   --bp-tablet: 768px
   --bp-desktop: 1024px
   --bp-wide: 1200px
   ========================================================================= */
@media (max-width: 768px) {
  :root {
    --text-h1: 2.25rem;
    --text-h2: 1.75rem;
    --text-h3: 1.25rem;
    --section-py: var(--section-py-mobile);
    --grid-gap: var(--grid-gap-mobile);
  }
}