/* ===========================================================
   MILANCO — Design Tokens (single source of truth)
   Load this BEFORE component CSS (milanco-beauty, milanco-header).
   Defines both --mc-* (beauty components) and --color-* (header) families.
   =========================================================== */

:root {
  /* ---- 7-color rainbow spectrum (used SEPARATELY, never as one blend) ---- */
  --mc-red:    #FF0000;
  --mc-orange: #FF7F00;
  --mc-yellow: #FFFF00;
  --mc-green:  #00B050;
  --mc-blue:   #0066FF;
  --mc-indigo: #4B0082;
  --mc-violet: #9400D3;

  /* Header-family aliases (same values, kept for legacy class usage) */
  --color-red:    var(--mc-red);
  --color-orange: var(--mc-orange);
  --color-yellow: var(--mc-yellow);
  --color-green:  var(--mc-green);
  --color-blue:   var(--mc-blue);
  --color-indigo: var(--mc-indigo);
  --color-violet: var(--mc-violet);

  /* ---- Brand ---- */
  --mc-primary:      var(--mc-red);
  --mc-red-deep:     #CC0000;
  --mc-gold:         #D4AF37;
  --mc-pink:         #F0A1C4;
  --mc-brown:        #8B6F47;

  /* ---- Light tints (backgrounds / soft surfaces) ---- */
  --mc-red-light:    #FFE5E5;
  --mc-orange-light: #FFE8D1;
  --mc-yellow-light: #FFFFF0;
  --mc-green-light:  #E5F7E5;
  --mc-blue-light:   #E5F0FF;
  --mc-indigo-light: #F0E5FF;
  --mc-violet-light: #F5E5FF;

  /* ---- Neutrals ---- */
  --mc-cream:   #FFF7F2;
  --mc-bg:      #FFFBF8;
  --mc-surface: #FFFFFF;
  --mc-ink:     #2A1B2F;
  --mc-muted:   #7D6B82;
  --mc-line:    #F1E6EE;

  /* ---- Gradients (intentional, limited) ---- */
  --mc-primary-grad: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);   /* primary CTAs */
  --mc-accent-grad:  linear-gradient(135deg, #FF0000 0%, #9400D3 100%);   /* one flair element (wholesale banner) */
  /* 7 distinct color blocks, hard stops — brand identity as separate colors */
  --gradient-rainbow: linear-gradient(90deg,
      #FF0000 0 14.285%, #FF7F00 14.285% 28.57%, #FFFF00 28.57% 42.857%,
      #00B050 42.857% 57.143%, #0066FF 57.143% 71.428%, #4B0082 71.428% 85.714%,
      #9400D3 85.714% 100%);
  --stripe-rainbow: var(--gradient-rainbow);

  /* ---- Shadows ---- */
  --mc-shadow-sm: 0 4px 12px rgba(255, 0, 0, .08);
  --mc-shadow-md: 0 10px 30px rgba(75, 0, 130, .12);
  --mc-shadow-lg: 0 18px 48px rgba(148, 0, 211, .18);

  /* ---- Radius ---- */
  --mc-radius-sm: 12px;
  --mc-radius:    18px;
  --mc-radius-lg: 28px;
  --mc-radius-xl: 32px;

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

  /* ---- Typography ---- */
  --mc-font: "Vazirmatn", "Estedad", "IRANSansX", "IRANSans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: clamp(28px, 4.5vw, 52px);

  /* ---- Motion ---- */
  --t-fast: .15s ease;
  --t-base: .25s ease;
  --t-slow: .5s ease;
}