/* =========================================================
   Mizunara Studio Design System
   tokens.css
   Versión: 1.0
   ========================================================= */

:root {
  /* =========================
     Brand Colors
     ========================= */

  --ms-color-bg: #fff7fb;
  --ms-color-surface: rgba(255, 255, 255, 0.62);
  --ms-color-surface-strong: rgba(255, 255, 255, 0.82);

  --ms-color-primary: #c8a46b;
  --ms-color-primary-soft: #ead9b7;
  --ms-color-primary-dark: #9f7d43;

  --ms-color-secondary: #b98bd6;
  --ms-color-secondary-soft: #eadcf4;

  --ms-color-accent: #f3b6c8;
  --ms-color-accent-soft: #f9dce6;

  --ms-color-text: #2f2430;
  --ms-color-muted: #7b6f7d;
  --ms-color-light: #ffffff;
  --ms-color-dark: #111111;

  --ms-color-border: rgba(200, 164, 107, 0.28);
  --ms-color-border-soft: rgba(255, 255, 255, 0.46);

  /* =========================
     Semantic Colors
     ========================= */

  --ms-color-success: #7fa982;
  --ms-color-warning: #d6a75c;
  --ms-color-error: #c96f6f;
  --ms-color-info: #8aa8c7;

  /* =========================
     Typography
     ========================= */

  --ms-font-title: "Cormorant Garamond", Georgia, serif;
  --ms-font-body: "Montserrat", Arial, sans-serif;
  --ms-font-script: "Great Vibes", cursive;

  --ms-text-xs: 0.75rem;
  --ms-text-sm: 0.875rem;
  --ms-text-base: 1rem;
  --ms-text-md: 1.125rem;
  --ms-text-lg: 1.375rem;
  --ms-text-xl: 1.75rem;
  --ms-text-2xl: 2.25rem;
  --ms-text-3xl: 3rem;
  --ms-text-4xl: 4rem;

  --ms-line-tight: 1.05;
  --ms-line-normal: 1.5;
  --ms-line-loose: 1.8;

  --ms-letter-soft: 0.04em;
  --ms-letter-wide: 0.12em;

  /* =========================
     Spacing
     ========================= */

  --ms-space-2xs: 0.25rem;
  --ms-space-xs: 0.5rem;
  --ms-space-sm: 0.75rem;
  --ms-space-md: 1rem;
  --ms-space-lg: 1.5rem;
  --ms-space-xl: 2rem;
  --ms-space-2xl: 3rem;
  --ms-space-3xl: 4rem;
  --ms-space-4xl: 6rem;

  /* =========================
     Layout
     ========================= */

  --ms-container-sm: 720px;
  --ms-container-md: 960px;
  --ms-container-lg: 1180px;

  --ms-section-padding: clamp(4rem, 8vw, 7rem);
  --ms-section-padding-sm: clamp(2.5rem, 6vw, 4.5rem);

  /* =========================
     Radius
     ========================= */

  --ms-radius-xs: 8px;
  --ms-radius-sm: 12px;
  --ms-radius-md: 20px;
  --ms-radius-lg: 32px;
  --ms-radius-xl: 42px;
  --ms-radius-full: 999px;

  /* =========================
     Shadows
     ========================= */

  --ms-shadow-xs: 0 4px 12px rgba(40, 25, 45, 0.08);
  --ms-shadow-sm: 0 10px 30px rgba(40, 25, 45, 0.1);
  --ms-shadow-md: 0 20px 60px rgba(80, 45, 80, 0.14);
  --ms-shadow-lg: 0 30px 90px rgba(80, 45, 80, 0.2);

  --ms-shadow-gold: 0 12px 35px rgba(200, 164, 107, 0.25);
  --ms-shadow-glow: 0 0 45px rgba(243, 182, 200, 0.35);

  /* =========================
     Glassmorphism
     ========================= */

  --ms-glass-bg: rgba(255, 255, 255, 0.58);
  --ms-glass-bg-strong: rgba(255, 255, 255, 0.76);
  --ms-glass-border: 1px solid rgba(255, 255, 255, 0.42);
  --ms-glass-blur: blur(18px);
  --ms-glass-blur-strong: blur(28px);

  /* =========================
     Borders
     ========================= */

  --ms-border-soft: 1px solid rgba(255, 255, 255, 0.42);
  --ms-border-gold: 1px solid rgba(200, 164, 107, 0.38);
  --ms-border-dark: 1px solid rgba(47, 36, 48, 0.12);

  /* =========================
     Motion
     ========================= */

  --ms-transition-fast: 0.2s ease;
  --ms-transition-normal: 0.35s ease;
  --ms-transition-slow: 0.6s ease;

  --ms-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ms-ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);

  /* =========================
     Z Index
     ========================= */

  --ms-z-bg: -1;
  --ms-z-base: 1;
  --ms-z-floating: 10;
  --ms-z-header: 50;
  --ms-z-modal: 100;
  --ms-z-loader: 999;

  /* =========================
     Buttons
     ========================= */

  --ms-button-height: 48px;
  --ms-button-padding: 0 1.5rem;
  --ms-button-radius: var(--ms-radius-full);
  --ms-button-font-size: var(--ms-text-sm);
  --ms-button-letter: 0.08em;

  /* =========================
     Cards
     ========================= */

  --ms-card-padding: clamp(1.2rem, 4vw, 2rem);
  --ms-card-radius: var(--ms-radius-lg);
  --ms-card-bg: var(--ms-glass-bg);
  --ms-card-border: var(--ms-glass-border);
  --ms-card-shadow: var(--ms-shadow-md);

  /* =========================
     Forms
     ========================= */

  --ms-input-height: 48px;
  --ms-input-radius: var(--ms-radius-full);
  --ms-input-bg: rgba(255, 255, 255, 0.72);
  --ms-input-border: 1px solid rgba(200, 164, 107, 0.28);
  --ms-input-padding: 0 1rem;

  /* =========================
     Decorative Effects
     ========================= */

  --ms-gradient-brand:
    radial-gradient(
      circle at top left,
      rgba(243, 182, 200, 0.45),
      transparent 32%
    ),
    radial-gradient(
      circle at top right,
      rgba(185, 139, 214, 0.35),
      transparent 34%
    ),
    linear-gradient(180deg, #fff7fb 0%, #ffffff 100%);

  --ms-gradient-gold: linear-gradient(
    135deg,
    #f7e7bd 0%,
    #c8a46b 45%,
    #9f7d43 100%
  );

  --ms-gradient-glass: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.74),
    rgba(255, 255, 255, 0.28)
  );

  --ms-backdrop-overlay: linear-gradient(
    180deg,
    rgba(255, 247, 251, 0.72),
    rgba(255, 255, 255, 0.92)
  );
}