// ==========================================================================
// Monitor.Cat — Design Tokens
// Mirrors the monitor-cat-home globals.css design system
// ==========================================================================

// ---------------------------------------------------------------------------
// Color palette
// ---------------------------------------------------------------------------
$mc-base:            #F7F8FA;
$mc-base-alt:        #EEF1F6;
$mc-white:           #FFFFFF;

$mc-primary:         #FF9F43;
$mc-primary-hover:   #F08C2E;
$mc-primary-light:   #FFF3E6;

$mc-lavender:        #C4B5FD;
$mc-lavender-strong: #8B5CF6;
$mc-lavender-light:  #EDE9FE;

$mc-mint:            #6EE7B7;
$mc-mint-strong:     #10B981;
$mc-mint-light:      #D1FAE5;

$mc-coral:           #FCA5A5;
$mc-coral-strong:    #F87171;
$mc-coral-light:     #FEE2E2;

$mc-cyan:            #22D3EE;
$mc-cyan-strong:     #06B6D4;
$mc-cyan-light:      #CFFAFE;

$mc-pink:            #F472B6;
$mc-pink-light:      #FCE7F3;

$mc-text:            #1E293B;
$mc-text-medium:     #475569;
$mc-text-light:      #94A3B8;

// ---------------------------------------------------------------------------
// Typography
// ---------------------------------------------------------------------------
$mc-font-heading:    'Fredoka', sans-serif;
$mc-font-body:       'Rubik', sans-serif;

// ---------------------------------------------------------------------------
// Borders & radii
// ---------------------------------------------------------------------------
$mc-radius-card:     24px;
$mc-radius-inset:    20px;
$mc-radius-pill:     999px;
$mc-radius-input:    1rem;
$mc-radius-tab:      14px;
$mc-radius-alert:    16px;

$mc-border-color:    rgba(238, 241, 246, 0.8);
$mc-input-border:    rgba(148, 163, 184, 0.22);

// ---------------------------------------------------------------------------
// Transitions & easing
// ---------------------------------------------------------------------------
$mc-ease-spring:     cubic-bezier(0.16, 1, 0.3, 1);
$mc-transition-base: 0.35s $mc-ease-spring;

// ---------------------------------------------------------------------------
// Shadows (clay card multi-layer)
// ---------------------------------------------------------------------------
$mc-shadow-card:
  0 1px 2px rgba(0, 0, 0, 0.03),
  0 4px 8px rgba(0, 0, 0, 0.04),
  0 8px 16px rgba(0, 0, 0, 0.03),
  0 12px 32px rgba(0, 0, 0, 0.02),
  0 20px 48px rgba(0, 0, 0, 0.02),
  inset 0 -1px 2px rgba(0, 0, 0, 0.02);

$mc-shadow-card-hover:
  0 2px 4px rgba(0, 0, 0, 0.04),
  0 8px 16px rgba(0, 0, 0, 0.06),
  0 16px 32px rgba(0, 0, 0, 0.05),
  0 24px 48px rgba(0, 0, 0, 0.04),
  0 32px 64px rgba(0, 0, 0, 0.03),
  inset 0 -1px 2px rgba(0, 0, 0, 0.02);

$mc-shadow-inset:
  inset 0 2px 6px rgba(0, 0, 0, 0.06),
  inset 0 1px 3px rgba(0, 0, 0, 0.04);

$mc-shadow-pedestal:
  0 2px 8px rgba(0, 0, 0, 0.06),
  0 4px 16px rgba(0, 0, 0, 0.04);

$mc-shadow-pedestal-inset:
  inset 0 -2px 4px rgba(255, 255, 255, 0.7);

// ---------------------------------------------------------------------------
// Spacing scale
// ---------------------------------------------------------------------------
$mc-space-sm:  0.75rem;
$mc-space-md:  1.25rem;
$mc-space-lg:  2rem;
$mc-space-xl:  3rem;

// ---------------------------------------------------------------------------
// CSS Custom Properties (mounted on .monitorcat-wrap)
// ---------------------------------------------------------------------------
.monitorcat-wrap {
  // Colors
  --mc-base:            #{$mc-base};
  --mc-base-alt:        #{$mc-base-alt};
  --mc-white:           #{$mc-white};

  --mc-primary:         #{$mc-primary};
  --mc-primary-hover:   #{$mc-primary-hover};
  --mc-primary-light:   #{$mc-primary-light};

  --mc-lavender:        #{$mc-lavender};
  --mc-lavender-strong: #{$mc-lavender-strong};
  --mc-lavender-light:  #{$mc-lavender-light};

  --mc-mint:            #{$mc-mint};
  --mc-mint-strong:     #{$mc-mint-strong};
  --mc-mint-light:      #{$mc-mint-light};

  --mc-coral:           #{$mc-coral};
  --mc-coral-strong:    #{$mc-coral-strong};
  --mc-coral-light:     #{$mc-coral-light};

  --mc-cyan:            #{$mc-cyan};
  --mc-cyan-strong:     #{$mc-cyan-strong};
  --mc-cyan-light:      #{$mc-cyan-light};

  --mc-pink:            #{$mc-pink};
  --mc-pink-light:      #{$mc-pink-light};

  --mc-text:            #{$mc-text};
  --mc-text-medium:     #{$mc-text-medium};
  --mc-text-light:      #{$mc-text-light};

  // Typography
  --mc-font-heading:    #{$mc-font-heading};
  --mc-font-body:       #{$mc-font-body};

  // Radii
  --mc-radius-card:     #{$mc-radius-card};
  --mc-radius-inset:    #{$mc-radius-inset};
  --mc-radius-pill:     #{$mc-radius-pill};
  --mc-radius-input:    #{$mc-radius-input};

  // Borders
  --mc-border-color:    #{$mc-border-color};
  --mc-input-border:    #{$mc-input-border};

  // Easing
  --mc-ease-spring:     #{$mc-ease-spring};

  // Spacing
  --mc-space-sm:        #{$mc-space-sm};
  --mc-space-md:        #{$mc-space-md};
  --mc-space-lg:        #{$mc-space-lg};
  --mc-space-xl:        #{$mc-space-xl};
}