/* ==========================================================================
   DESIGN TOKENS — COULEURS
   Palette HSL Sunset/Mystique · Dark Mode natif · Accents doux
   ========================================================================== */

:root {
  /* Fonds de surface */
  --color-bg-primary:          #FFF7F2;
  --color-bg-secondary:        #FDECE3;
  --color-bg-surface:          rgba(255, 247, 242, 0.75);
  --color-bg-surface-elevated: #FFFFFF;
  --color-bg-overlay:          rgba(255, 247, 242, 0.85);

  /* Texte */
  --color-text-primary:        hsl(330, 41%, 25%);
  --color-text-secondary:      hsl(17, 66%, 41%);
  --color-text-muted:          hsl(330, 20%, 55%);
  --color-text-inverse:        #FFF7F2;

  /* Accents */
  --color-accent-primary:      hsl(17, 72%, 56%);
  --color-accent-primary-hover:hsl(17, 72%, 46%);
  --color-accent-secondary:    hsl(323, 33%, 67%);
  --color-accent-secondary-hover: hsl(323, 33%, 57%);
  --color-accent-tertiary:     hsl(24, 85%, 76%);

  /* Gradient signature */
  --gradient-hero:             linear-gradient(135deg,
                                 hsl(24, 85%, 76%) 0%,
                                 hsl(17, 72%, 56%) 50%,
                                 hsl(330, 41%, 38%) 100%);
  --gradient-subtle:           linear-gradient(180deg,
                                 hsla(17, 72%, 56%, 0.06) 0%,
                                 transparent 60%);

  /* Bordures */
  --color-border:              hsla(330, 41%, 25%, 0.08);
  --color-border-strong:       hsla(330, 41%, 25%, 0.16);
  --color-border-brutal:       hsl(330, 41%, 25%);

  /* Statuts */
  --color-success:             hsl(142, 71%, 45%);
  --color-warning:             hsl(38, 92%, 50%);
  --color-error:               hsl(0, 84%, 60%);
  --color-info:                hsl(199, 89%, 48%);

  /* Focus ring */
  --color-focus-ring:          hsla(17, 72%, 56%, 0.5);
}

/* Dark Mode */
[data-theme="dark"] {
  --color-bg-primary:          hsl(335, 30%, 12%);
  --color-bg-secondary:        hsl(335, 30%, 16%);
  --color-bg-surface:          hsla(335, 30%, 12%, 0.75);
  --color-bg-surface-elevated: hsl(335, 30%, 18%);
  --color-bg-overlay:          hsla(335, 30%, 12%, 0.9);

  --color-text-primary:        hsl(20, 80%, 95%);
  --color-text-secondary:      hsl(24, 85%, 76%);
  --color-text-muted:          hsl(330, 20%, 65%);
  --color-text-inverse:        #FFF7F2;

  --color-accent-primary:      hsl(17, 72%, 66%);
  --color-accent-primary-hover:hsl(17, 72%, 56%);
  --color-accent-secondary:    hsl(323, 33%, 72%);
  --color-accent-secondary-hover: hsl(323, 33%, 62%);
  --color-accent-tertiary:     hsl(24, 85%, 80%);

  --gradient-hero:             linear-gradient(135deg,
                                 hsl(24, 85%, 65%) 0%,
                                 hsl(17, 72%, 56%) 50%,
                                 hsl(330, 41%, 50%) 100%);
  --gradient-subtle:           linear-gradient(180deg,
                                 hsla(24, 85%, 76%, 0.08) 0%,
                                 transparent 60%);

  --color-border:              hsla(20, 80%, 95%, 0.08);
  --color-border-strong:       hsla(20, 80%, 95%, 0.16);
  --color-border-brutal:       hsla(20, 80%, 95%, 0.20);
  --color-focus-ring:          hsla(17, 72%, 66%, 0.5);
}

/* Préférence OS automatique */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:          hsl(335, 30%, 12%);
    --color-bg-secondary:        hsl(335, 30%, 16%);
    --color-bg-surface:          hsla(335, 30%, 12%, 0.75);
    --color-bg-surface-elevated: hsl(335, 30%, 18%);
    --color-bg-overlay:          hsla(335, 30%, 12%, 0.9);
    --color-text-primary:        hsl(20, 80%, 95%);
    --color-text-secondary:      hsl(24, 85%, 76%);
    --color-text-muted:          hsl(330, 20%, 65%);
    --color-text-inverse:        #FFF7F2;
    --color-accent-primary:      hsl(17, 72%, 66%);
    --color-accent-primary-hover:hsl(17, 72%, 56%);
    --color-accent-secondary:    hsl(323, 33%, 72%);
    --color-accent-secondary-hover: hsl(323, 33%, 62%);
    --color-accent-tertiary:     hsl(24, 85%, 80%);
    --gradient-hero:             linear-gradient(135deg,
                                   hsl(24, 85%, 65%) 0%,
                                   hsl(17, 72%, 56%) 50%,
                                   hsl(330, 41%, 50%) 100%);
    --gradient-subtle:           linear-gradient(180deg,
                                   hsla(24, 85%, 76%, 0.08) 0%,
                                   transparent 60%);
    --color-border:              hsla(20, 80%, 95%, 0.08);
    --color-border-strong:       hsla(20, 80%, 95%, 0.16);
    --color-border-brutal:       hsla(20, 80%, 95%, 0.20);
    --color-focus-ring:          hsla(17, 72%, 66%, 0.5);
  }
}