/* ==========================================================================
   ShahdTouch — tokens.css
   Valeurs par défaut du design system. ThemeEngine::renderTokens() injecte un
   :root{} APRÈS ce fichier : toute valeur personnalisée par la boutique gagne.
   Ne jamais mettre de couleur en dur ailleurs que dans ce fichier.
   ========================================================================== */

:root {
  /* Couleurs — univers luxe discret, ivoire + or champagne */
  --color-primary: #1A1512;
  --color-secondary: #3A2E24;
  --color-accent: #C89B3C;
  --color-accent-ink: #8A5A18;
  --color-background: #FAF6EF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F3EBDD;
  --color-text: #1A1512;
  --color-text-muted: #6B5B4A;
  --color-border: #E8DECB;
  --color-border-strong: #D6C7A8;
  --color-success: #3F7D5A;
  --color-warning: #B8862F;
  --color-danger: #AE4F49;
  --color-sale: #9C4A38;
  --color-on-primary: #FAF6EF;
  --color-on-accent: #FFFFFF;
  /* Texte posé sur un VOILE sombre (hero, collections, listing) : reste clair
     quelle que soit la palette du marchand — sinon le contraste casse. */
  --color-on-overlay: #FFFFFF;

  /* Degrade NECTAR — usage STRICTEMENT limite a deux endroits :
     la barre de progression du questionnaire ADN et les badges de % de match.
     Ne jamais l employer ailleurs (regle de direction artistique). */
  --color-nectar-from: #E8C878;
  --color-nectar-to: #C89B3C;
  --gradient-nectar: linear-gradient(135deg, var(--color-nectar-from), var(--color-nectar-to));

  /* Typographie — serif éditoriale pour les titres, sans-serif premium pour l'UI */
  --font-family-base: 'Jost', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-size-base: 17px;
  --font-size-sm: 15px;
  --font-size-xs: 13px;
  --font-weight-base: 400;
  --font-weight-medium: 500;
  --font-weight-heading: 500;
  --line-height-base: 1.7;
  --line-height-heading: 1.12;
  --letter-spacing-label: 0.16em;
  --heading-scale: 1.22;

  /* Formes */
  --border-radius: 2px;
  --border-radius-sm: 0px;
  --border-radius-lg: 4px;
  --button-radius: 0px;

  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 104px;

  /* Élévation & mouvement */
  --shadow-sm: 0 1px 2px rgba(28, 24, 21, 0.04), 0 1px 3px rgba(28, 24, 21, 0.05);
  --shadow-md: 0 4px 14px rgba(28, 24, 21, 0.06), 0 14px 36px rgba(28, 24, 21, 0.07);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Mise en page */
  --header-height: 88px;
  --container-max-width: 1320px;
  --container-padding: 24px;
  --section-spacing: 76px;
  --logo-size: 100px;

  /* Réglages produits / boutons pilotables depuis le Studio */
  --card-aspect: 4 / 5;
  --card-fit: contain;
  --button-uppercase: uppercase;
  --grid-gap: 32px;
  --motion-scale: 1;

  /* Dérivés internes (jamais édités directement) */
  --sht-ink-05: color-mix(in srgb, var(--color-text) 5%, transparent);
  --sht-ink-08: color-mix(in srgb, var(--color-text) 8%, transparent);
  --sht-accent-08: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --sht-accent-14: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* Repli pour les navigateurs sans color-mix() (Safari < 16.2, Firefox < 113). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --sht-ink-05: rgba(28, 24, 21, 0.05);
    --sht-ink-08: rgba(28, 24, 21, 0.08);
    --sht-accent-08: rgba(169, 131, 76, 0.08);
    --sht-accent-14: rgba(169, 131, 76, 0.14);
  }
}