@syncognito/maya/dist/rupam/variables.css

Maya Design System - Shared tokens and platform-specific components

/* Maya Theme Variables */

/* Day theme (light standard) */
:root {
  --maya-primary: #7408c2;
  --maya-primary-light: #9b4dd9;
  --maya-primary-dark: #5a0a9a;
  --maya-primary-subtle: #f0e6ff;

  --maya-background: #ffffff;
  --maya-surface: #f9fafb;
  --maya-surface-secondary: #f3f4f6;
  --maya-surface-elevated: #ffffff;

  --maya-text: #111827;
  --maya-text-secondary: #6b7280;
  --maya-text-tertiary: #9ca3af;
  --maya-text-inverse: #ffffff;
  --maya-text-disabled: #d1d5db;

  --maya-border: #e5e7eb;
  --maya-border-secondary: #f3f4f6;
  --maya-border-focus: #7408c2;

  --maya-interactive-hover: #f0e6ff;
  --maya-interactive-active: #e6d6ff;
  --maya-interactive-focus: #f8f0ff;
  --maya-interactive-disabled: #f9fafb;

  --maya-danger: #ef4444;
  --maya-danger-dark: #dc2626;
}

/* Evening theme (warm, muted middle ground) */
[data-maya-theme='evening'] {
  --maya-primary: #dc2626;
  --maya-primary-light: #ef4444;
  --maya-primary-dark: #b91c1c;
  --maya-primary-subtle: #fecaca;

  --maya-background: #fef2f2;
  --maya-surface: #fee2e2;
  --maya-surface-secondary: #fecaca;
  --maya-surface-elevated: #fca5a5;

  --maya-text: #450a0a;
  --maya-text-secondary: #991b1b;
  --maya-text-tertiary: #dc2626;
  --maya-text-inverse: #ffffff;
  --maya-text-disabled: #f87171;

  --maya-border: #fca5a5;
  --maya-border-secondary: #fecaca;
  --maya-border-focus: #dc2626;

  --maya-interactive-hover: #fee2e2;
  --maya-interactive-active: #fecaca;
  --maya-interactive-focus: #fca5a5;
  --maya-interactive-disabled: #fecaca;

  --maya-danger: #dc2626;
  --maya-danger-dark: #b91c1c;
}

/* GenZ theme (poppy, vibrant, energetic) */
[data-maya-theme='genz'] {
  --maya-primary: #a855f7;
  --maya-primary-light: #c084fc;
  --maya-primary-dark: #9333ea;
  --maya-primary-subtle: #f3e8ff;

  --maya-background: linear-gradient(
    135deg,
    #2d1b69 0%,
    #4a3b8a 30%,
    #7c3aed 70%,
    #a855f7 100%
  );
  --maya-surface: #3d2b79;
  --maya-surface-secondary: #4a3b8a;
  --maya-surface-elevated: #5b4b9a;

  --maya-text: #ffffff;
  --maya-text-secondary: #e9d5ff;
  --maya-text-tertiary: #c4b5fd;
  --maya-text-inverse: #ffffff;
  --maya-text-disabled: #a78bfa;

  --maya-border: #5b4b9a;
  --maya-border-secondary: #4a3b8a;
  --maya-border-focus: #7408c2;

  --maya-interactive-hover: #2d1b69;
  --maya-interactive-active: #1f0f4d;
  --maya-interactive-focus: #3d2b79;
  --maya-interactive-disabled: #4a3b8a;

  --maya-danger: #ef4444;
  --maya-danger-dark: #dc2626;

  /* GenZ specific vibrant accents */
  --maya-accent-1: #f59e0b;
  --maya-accent-2: #10b981;
  --maya-accent-3: #3b82f6;
  --maya-accent-4: #f97316;
  --maya-accent-5: #8b5cf6;

  /* GenZ specific effects - more striking */
  --maya-glow-primary:
    0 0 40px rgba(168, 85, 247, 0.8), 0 0 80px rgba(168, 85, 247, 0.4),
    0 0 120px rgba(168, 85, 247, 0.2);
  --maya-glow-accent:
    0 0 35px rgba(245, 158, 11, 0.9), 0 0 70px rgba(245, 158, 11, 0.5),
    0 0 100px rgba(245, 158, 11, 0.3);
  --maya-shadow-vibrant:
    0 15px 50px rgba(168, 85, 247, 0.4), 0 8px 30px rgba(168, 85, 247, 0.3),
    0 4px 20px rgba(168, 85, 247, 0.2);
  --maya-border-gradient: linear-gradient(45deg, #a855f7, #c084fc, #d946ef);
  --maya-text-glow:
    0 0 15px rgba(168, 85, 247, 0.7), 0 0 30px rgba(168, 85, 247, 0.4);
  --maya-bg-gradient-primary: linear-gradient(
    135deg,
    #a855f7 0%,
    #c084fc 50%,
    #d946ef 100%
  );
}

/* Night theme (dark standard) */
[data-maya-theme='night'] {
  --maya-primary: #7408c2;
  --maya-primary-light: #9b4dd9;
  --maya-primary-dark: #5a0a9a;
  --maya-primary-subtle: #f0e6ff;

  --maya-background: #1f2937;
  --maya-surface: #374151;
  --maya-surface-secondary: #4b5563;
  --maya-surface-elevated: #374151;

  --maya-text: #f9fafb;
  --maya-text-secondary: #d1d5db;
  --maya-text-tertiary: #9ca3af;
  --maya-text-inverse: #ffffff;
  --maya-text-disabled: #6b7280;

  --maya-border: #4b5563;
  --maya-border-secondary: #374151;
  --maya-border-focus: #7408c2;

  --maya-interactive-hover: #2d1b69;
  --maya-interactive-active: #1f0f4d;
  --maya-interactive-focus: #3d2b79;
  --maya-interactive-disabled: #374151;

  --maya-danger: #ef4444;
  --maya-danger-dark: #dc2626;
}

/* GenZ specific utility classes for vibrant effects */
[data-maya-theme='genz'] .maya-glow-primary {
  box-shadow: var(--maya-glow-primary);
}

[data-maya-theme='genz'] .maya-glow-accent {
  box-shadow: var(--maya-glow-accent);
}

[data-maya-theme='genz'] .maya-shadow-vibrant {
  box-shadow: var(--maya-shadow-vibrant);
}

[data-maya-theme='genz'] .maya-border-gradient {
  border: 2px solid;
  border-image: var(--maya-border-gradient) 1;
}

[data-maya-theme='genz'] .maya-bg-gradient-primary {
  background: var(--maya-bg-gradient-primary);
}

[data-maya-theme='genz'] .maya-text-glow {
  text-shadow: var(--maya-text-glow);
}

/* Automatic GenZ effects for brand elements */
[data-maya-theme='genz'] .text-brand-primary {
  text-shadow: var(--maya-text-glow);
}

[data-maya-theme='genz'] .bg-brand-primary {
  box-shadow: var(--maya-glow-primary);
}

[data-maya-theme='genz'] .border-brand-primary {
  box-shadow: var(--maya-glow-primary);
}

/* Enhanced text visibility for GenZ theme */
[data-maya-theme='genz'] .text-text-primary {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

[data-maya-theme='genz'] .text-text-secondary {
  text-shadow: 0 0 6px rgba(233, 213, 255, 0.4);
}

[data-maya-theme='genz'] .maya-text-accent-1 {
  color: var(--maya-accent-1);
}

[data-maya-theme='genz'] .maya-text-accent-2 {
  color: var(--maya-accent-2);
}

[data-maya-theme='genz'] .maya-text-accent-3 {
  color: var(--maya-accent-3);
}

[data-maya-theme='genz'] .maya-text-accent-4 {
  color: var(--maya-accent-4);
}

[data-maya-theme='genz'] .maya-text-accent-5 {
  color: var(--maya-accent-5);
}

/* Cyberpunk theme (futuristic, neon, high contrast) */
[data-maya-theme='cyberpunk'] {
  --maya-primary: #00ff88;
  --maya-primary-light: #33ffaa;
  --maya-primary-dark: #00cc6a;
  --maya-primary-subtle: #e6fff0;

  --maya-background: #0a0a0a;
  --maya-surface: #1a1a1a;
  --maya-surface-secondary: #2a2a2a;
  --maya-surface-elevated: #3a3a3a;

  --maya-text: #ffffff;
  --maya-text-secondary: #cccccc;
  --maya-text-tertiary: #999999;
  --maya-text-inverse: #000000;
  --maya-text-disabled: #666666;

  --maya-border: #00ff88;
  --maya-border-secondary: #333333;
  --maya-border-focus: #00ff88;

  --maya-interactive-hover: #1a1a1a;
  --maya-interactive-active: #0a0a0a;
  --maya-interactive-focus: #2a2a2a;
  --maya-interactive-disabled: #333333;

  --maya-danger: #ff0044;
  --maya-danger-dark: #cc0033;
}

/* Retro theme (nostalgic, vintage, muted) */
[data-maya-theme='retro'] {
  --maya-primary: #8b4513;
  --maya-primary-light: #a0522d;
  --maya-primary-dark: #654321;
  --maya-primary-subtle: #f5f5dc;

  --maya-background: #f5f5dc;
  --maya-surface: #f0e68c;
  --maya-surface-secondary: #daa520;
  --maya-surface-elevated: #cd853f;

  --maya-text: #2f2f2f;
  --maya-text-secondary: #696969;
  --maya-text-tertiary: #a9a9a9;
  --maya-text-inverse: #ffffff;
  --maya-text-disabled: #c0c0c0;

  --maya-border: #daa520;
  --maya-border-secondary: #f0e68c;
  --maya-border-focus: #8b4513;

  --maya-interactive-hover: #f0e68c;
  --maya-interactive-active: #daa520;
  --maya-interactive-focus: #cd853f;
  --maya-interactive-disabled: #f0e68c;

  --maya-danger: #8b0000;
  --maya-danger-dark: #660000;
}