/**
 * J'allète Theme for Spacetime Components
 *
 * "Lait's be stylish" - Mode responsable, fabrication marocaine
 *
 * Soft rose/coral palette, modern geometric sans-serif,
 * tighter spacing than luxury brands. Family-oriented, warm, accessible.
 */

[data-theme="jallete"] {
  /* ==========================================================================
     COULEURS - Fresh, warm, family-oriented
     ========================================================================== */

  /* Background Colors */
  --st-bg: #FFFBF8;                        /* Blanc Chaleureux */
  --st-bg-surface: #FFF5F0;                /* Blush Subtil */
  --st-bg-surface-hover: #FFEBE3;          /* Blush hover */
  --st-bg-dark: #2D3436;                   /* Dark mode background */

  /* Text Colors */
  --st-text: #2D3436;                      /* Charcoal Chaud */
  --st-text-muted: #636E72;                /* Gris Doux */
  --st-text-subtle: #8A9399;               /* Gris très subtil */
  --st-text-light: #FFFBF8;                /* Texte sur fond sombre */

  /* Accent Colors - Coral Vibrant */
  --st-accent: #E85A4F;                    /* CTAs principaux */
  --st-accent-light: #FF7675;              /* Hover states */
  --st-accent-dark: #C94A40;               /* Active/pressed */
  --st-accent-glow: rgba(232, 90, 79, 0.12); /* Focus rings, glows */
  --st-accent-gradient: linear-gradient(135deg, #E85A4F 0%, #FF7675 100%);

  /* Secondary Rose Colors */
  --jal-rose: #FABCB7;                     /* Rose Poudré - badges, promos */
  --jal-rose-light: #FDD9D7;               /* Rose Nuage - backgrounds */
  --jal-rose-ultra-light: #FEF0EE;         /* Très subtil */

  /* Success / Feedback */
  --jal-success: #00B894;                  /* En stock, confirmations */
  --jal-success-light: #E8F8F5;            /* Background success */
  --jal-warning: #FDCB6E;                  /* Attention */
  --jal-error: #E85A4F;                    /* Erreurs (même que accent) */

  /* Borders */
  --st-border: rgba(45, 52, 54, 0.08);     /* Bordure subtile */
  --st-border-accent: rgba(232, 90, 79, 0.25); /* Bordure accent */

  /* ==========================================================================
     ESPACEMENT - Tighter than luxury, modern and dynamic
     ========================================================================== */

  --st-space-xs: 0.5rem;    /* 8px - micro gaps, badge padding */
  --st-space-sm: 0.75rem;   /* 12px - button padding, card gaps */
  --st-space-md: 1.5rem;    /* 24px - card padding, element margins */
  --st-space-lg: 3rem;      /* 48px - section spacing */
  --st-space-xl: 5rem;      /* 80px - major section separation */

  /* ==========================================================================
     BORDER RADIUS - Medium, not ultra-soft
     ========================================================================== */

  --st-radius-sm: 6px;      /* Badges, pills, small elements */
  --st-radius-md: 12px;     /* Cards, buttons, images */
  --st-radius-lg: 16px;     /* Sections, modals, large cards */
  --st-radius-xl: 24px;     /* Hero sections, feature cards */
  --st-radius-full: 9999px; /* Round buttons, avatars */

  /* ==========================================================================
     TYPOGRAPHIE - Modern geometric sans + handwritten for warmth
     ========================================================================== */

  --st-font-display: "Outfit", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --st-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --st-font-handwritten: "Caveat", cursive; /* For personal, warm touches */

  /* Type scale */
  --st-text-hero: 3.5rem;      /* 56px */
  --st-text-h1: 2.5rem;        /* 40px */
  --st-text-h2: 2rem;          /* 32px */
  --st-text-h3: 1.5rem;        /* 24px */
  --st-text-body-lg: 1.125rem; /* 18px */
  --st-text-body: 1rem;        /* 16px */
  --st-text-small: 0.875rem;   /* 14px */
  --st-text-caption: 0.75rem;  /* 12px */

  /* ==========================================================================
     OMBRES - Subtle but present
     ========================================================================== */

  --st-shadow-sm: 0 2px 8px rgba(45, 52, 54, 0.06);
  --st-shadow-md: 0 4px 16px rgba(45, 52, 54, 0.08);
  --st-shadow-lg: 0 8px 32px rgba(45, 52, 54, 0.12);
  --st-shadow-hover: 0 12px 40px rgba(45, 52, 54, 0.15);
  --st-shadow-accent: 0 0 0 3px rgba(232, 90, 79, 0.15);

  /* ==========================================================================
     ANIMATIONS - Snappy and modern
     ========================================================================== */

  --st-duration-fast: 150ms;
  --st-duration-medium: 250ms;
  --st-duration-slow: 400ms;
  --st-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --st-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* =============================================================================
   COMPONENT OVERRIDES
   ============================================================================= */

/* Hero Section */
[data-theme="jallete"] .st-hero {
  background: var(--st-bg);
}

[data-theme="jallete"] .st-hero__badge {
  background: var(--jal-rose);
  color: var(--st-text);
  font-family: var(--st-font-sans);
  font-size: var(--st-text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: var(--st-radius-sm);
  border: none;
}

[data-theme="jallete"] .st-hero__title {
  font-family: var(--st-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--st-text);
}

[data-theme="jallete"] .st-hero__subtitle {
  font-family: var(--st-font-sans);
  font-weight: 400;
  color: var(--st-text-muted);
  line-height: 1.6;
  max-width: 500px;
}

/* Cards */
[data-theme="jallete"] .st-card {
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow-sm);
  transition: transform var(--st-duration-fast) var(--st-ease-out),
              box-shadow var(--st-duration-fast) var(--st-ease-out);
}

[data-theme="jallete"] .st-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--st-shadow-md);
}

[data-theme="jallete"] .st-card__title {
  font-family: var(--st-font-display);
  font-weight: 600;
  color: var(--st-text);
}

[data-theme="jallete"] .st-card__icon {
  background: var(--jal-rose-light);
  color: var(--st-accent);
  border: none;
  border-radius: var(--st-radius-sm);
}

/* CTA Buttons */
[data-theme="jallete"] .st-cta {
  background: var(--st-accent);
  color: white;
  border: none;
  border-radius: var(--st-radius-md);
  font-family: var(--st-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: var(--st-space-sm) var(--st-space-md);
  box-shadow: var(--st-shadow-sm);
  transition: all var(--st-duration-fast) var(--st-ease-out);
}

[data-theme="jallete"] .st-cta:hover {
  background: var(--st-accent-light);
  transform: translateY(-2px);
  box-shadow: var(--st-shadow-md);
}

[data-theme="jallete"] .st-cta:active {
  transform: translateY(0);
  box-shadow: var(--st-shadow-sm);
}

[data-theme="jallete"] .st-cta:focus-visible {
  outline: none;
  box-shadow: var(--st-shadow-accent);
}

[data-theme="jallete"] .st-cta[data-variant="secondary"] {
  background: transparent;
  color: var(--st-accent);
  border: 2px solid var(--st-accent);
  box-shadow: none;
}

[data-theme="jallete"] .st-cta[data-variant="secondary"]:hover {
  background: var(--st-accent-glow);
  transform: translateY(-2px);
}

[data-theme="jallete"] .st-cta[data-variant="ghost"] {
  background: transparent;
  color: var(--st-text);
  box-shadow: none;
}

[data-theme="jallete"] .st-cta[data-variant="ghost"]:hover {
  background: var(--st-bg-surface);
}

/* Sections */
[data-theme="jallete"] .st-section {
  padding: var(--st-space-lg) var(--st-space-md);
}

[data-theme="jallete"] .st-section__tag {
  background: var(--jal-rose-light);
  color: var(--st-accent);
  border: none;
  border-radius: var(--st-radius-sm);
  font-family: var(--st-font-sans);
  font-size: var(--st-text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
}

[data-theme="jallete"] .st-section__title {
  font-family: var(--st-font-display);
  font-weight: 700;
  color: var(--st-text);
  letter-spacing: -0.02em;
}

[data-theme="jallete"] .st-section__desc {
  color: var(--st-text-muted);
  max-width: 600px;
  line-height: 1.6;
}

/* Testimonials */
[data-theme="jallete"] .st-testimonial {
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow-sm);
  padding: var(--st-space-md);
}

[data-theme="jallete"] .st-testimonial__quote {
  font-family: var(--st-font-sans);
  font-size: var(--st-text-body-lg);
  font-style: normal;
  color: var(--st-text);
  line-height: 1.6;
}

[data-theme="jallete"] .st-testimonial__quote::before,
[data-theme="jallete"] .st-testimonial__quote::after {
  color: var(--jal-rose);
}

[data-theme="jallete"] .st-testimonial__name {
  font-family: var(--st-font-display);
  font-weight: 600;
  color: var(--st-text);
}

[data-theme="jallete"] .st-testimonial__role {
  color: var(--st-text-muted);
  font-size: var(--st-text-small);
}

/* CTA Section */
[data-theme="jallete"] .st-cta-section {
  background: var(--st-accent);
  color: white;
  border: none;
  padding: var(--st-space-lg) var(--st-space-md);
}

[data-theme="jallete"] .st-cta-section__title {
  font-family: var(--st-font-display);
  font-weight: 700;
  color: white;
}

[data-theme="jallete"] .st-cta-section__subtitle {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="jallete"] .st-cta-section .st-cta {
  background: white;
  color: var(--st-accent);
}

[data-theme="jallete"] .st-cta-section .st-cta:hover {
  background: var(--st-bg);
  color: var(--st-accent-dark);
}

/* Navigation */
[data-theme="jallete"] .st-nav {
  background: rgba(255, 251, 248, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--st-border);
}

[data-theme="jallete"] .st-nav__logo a {
  font-family: var(--st-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--st-text);
}

[data-theme="jallete"] .st-nav__links a {
  color: var(--st-text-muted);
  font-weight: 500;
  transition: color var(--st-duration-fast);
}

[data-theme="jallete"] .st-nav__links a:hover {
  color: var(--st-accent);
}

/* Footer */
[data-theme="jallete"] .st-footer {
  background: var(--st-bg-surface);
  border-top: 1px solid var(--st-border);
  padding: var(--st-space-lg) var(--st-space-md);
}

[data-theme="jallete"] .st-footer__brand {
  font-family: var(--st-font-display);
  font-weight: 600;
}

[data-theme="jallete"] .st-footer__links a {
  color: var(--st-text-muted);
}

[data-theme="jallete"] .st-footer__links a:hover {
  color: var(--st-accent);
}

/* Grid */
[data-theme="jallete"] .st-grid {
  gap: var(--st-space-md);
}

/* =============================================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
  [data-theme="jallete"] {
    --st-text-hero: 2.5rem;    /* 40px */
    --st-text-h1: 2rem;        /* 32px */
    --st-text-h2: 1.5rem;      /* 24px */
    --st-space-lg: 2.5rem;     /* 40px */
    --st-space-xl: 3.5rem;     /* 56px */
  }

  [data-theme="jallete"] .st-section {
    padding: var(--st-space-md) var(--st-space-sm);
  }
}