shadow-design 0.3.0

// ==============================================================================
// Shadow Design — SCSS Design Tokens & Variables
// ==============================================================================

// --- Void & Surface System (4-Level Optical Depth) ---
$color-void: #030305;
$color-surface-1: #09090d;
$color-surface-2: #111118;
$color-surface-3: #181824;

// --- Neutral Zinc Palette ---
$zinc-50:  #fafafa;
$zinc-100: #f4f4f5;
$zinc-200: #e4e4e7;
$zinc-300: #d4d4d8;
$zinc-400: #a1a1aa;
$zinc-500: #71717a;
$zinc-600: #52525b;
$zinc-700: #3f3f46;
$zinc-800: #27272a;
$zinc-900: #18181b;
$zinc-950: #09090b;

// --- Primary Color Accents ---
// Viola di base scuro (purple-950 / colore delle ombre)
$violet-primary:   #3b0764;
$violet-accent:    #a855f7;
$violet-glow:      rgba(168, 85, 247, 0.4);
$violet-highlight: #c084fc;

// Colori di base del tema accesi e vividi
$crimson-primary:   #ff1744;
$crimson-glow:      rgba(255, 23, 68, 0.45);
$crimson-highlight: #ff5277;

$cyan-primary:   #00f0ff;
$cyan-glow:      rgba(0, 240, 255, 0.45);
$cyan-highlight: #80f7ff;

$emerald-primary:   #00ff9d;
$emerald-glow:      rgba(0, 255, 157, 0.45);
$emerald-highlight: #6ee7b7;

$obsidian-primary:   #ffffff;
$obsidian-glow:      rgba(255, 255, 255, 0.25);
$obsidian-highlight: #ffffff;

// --- Semantic Accents & Ramps (DS-27) ---
$color-info:    #a855f7;
$color-success: #00ff9d;
$color-warning: #fbbf24;
$color-danger:  #ff1744;

$success: (
  solid:  #00ff9d,
  text:   #5dfcc3,
  border: rgba(0, 255, 157, 0.35),
  bg:     rgba(0, 255, 157, 0.10),
  glow:   rgba(0, 255, 157, 0.28)
);

$danger: (
  solid:  #ff1744,
  text:   #ff859b,
  border: rgba(255, 23, 68, 0.35),
  bg:     rgba(255, 23, 68, 0.10),
  glow:   rgba(255, 23, 68, 0.28)
);

$warning: (
  solid:  #fbbf24,
  text:   #fde68a,
  border: rgba(251, 191, 36, 0.35),
  bg:     rgba(251, 191, 36, 0.10),
  glow:   rgba(251, 191, 36, 0.28)
);

$info: (
  solid:  #a855f7,
  text:   #c084fc,
  border: rgba(168, 85, 247, 0.35),
  bg:     rgba(168, 85, 247, 0.10),
  glow:   rgba(168, 85, 247, 0.28)
);

// --- Control Sizing Scale (DS-15) ---
$control-h: (
  xs: 26px,
  sm: 32px,
  md: 40px,
  lg: 48px,
  xl: 54px
);

// --- Typography ---
$font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

// Type Scale Unified Map (DS-29)
$type-scale: (
  'xs':   (size: 0.75rem, line-height: 1rem),
  'sm':   (size: 0.875rem, line-height: 1.25rem),
  'base': (size: 1rem, line-height: 1.5rem),
  'md':   (size: 1rem, line-height: 1.5rem),
  'lg':   (size: 1.125rem, line-height: 1.75rem),
  'xl':   (size: 1.25rem, line-height: 1.75rem),
  '2xl':  (size: 1.5rem, line-height: 2rem),
  '3xl':  (size: 1.875rem, line-height: 2.25rem),
  '4xl':  (size: 2.25rem, line-height: 2.5rem)
);

$weight-title: 600;
$weight-heading: 700;

// --- Palette Map for Universal Utilities (DS-21) ---
$palette: (
  'violet': (
    50: #faf5ff,
    100: #f3e8ff,
    200: #e9d5ff,
    300: #d8b4fe,
    400: #c084fc,
    500: #a855f7,
    600: #9333ea,
    700: #7e22ce,
    800: #6b21a8,
    900: #581c87,
    950: #3b0764
  ),
  'purple': (
    50: #faf5ff,
    100: #f3e8ff,
    200: #e9d5ff,
    300: #d8b4fe,
    400: #c084fc,
    500: #a855f7,
    600: #9333ea,
    700: #7e22ce,
    800: #6b21a8,
    900: #581c87,
    950: #3b0764
  ),
  'crimson': (
    50: #fff1f2,
    100: #ffe4e6,
    200: #fecdd3,
    300: #fda4af,
    400: #fb7185,
    500: #f43f5e,
    600: #e11d48,
    700: #be123c,
    800: #9f1239,
    900: #881337,
    950: #4c0519
  ),
  'rose': (
    50: #fff1f2,
    100: #ffe4e6,
    200: #fecdd3,
    300: #fda4af,
    400: #fb7185,
    500: #f43f5e,
    600: #e11d48,
    700: #be123c,
    800: #9f1239,
    900: #881337,
    950: #4c0519
  ),
  'cyan': (
    50: #ecfeff,
    100: #cffafe,
    200: #a5f3fc,
    300: #67e8f9,
    400: #22d3ee,
    500: #06b6d4,
    600: #0891b2,
    700: #0e7490,
    800: #155e75,
    900: #164e63,
    950: #083344
  ),
  'emerald': (
    50: #ecfdf5,
    100: #d1fae5,
    200: #a7f3d0,
    300: #6ee7b7,
    400: #34d399,
    500: #10b981,
    600: #059669,
    700: #047857,
    800: #065f46,
    900: #064e3b,
    950: #022c22
  ),
  'amber': (
    50: #fffbeb,
    100: #fef3c7,
    200: #fde68a,
    300: #fcd34d,
    400: #fbbf24,
    500: #f59e0b,
    600: #d97706,
    700: #b45309,
    800: #92400e,
    900: #78350f,
    950: #451a03
  ),
  'zinc': (
    50: #fafafa,
    100: #f4f4f5,
    200: #e4e4e7,
    300: #d4d4d8,
    400: #a1a1aa,
    500: #71717a,
    600: #52525b,
    700: #3f3f46,
    800: #27272a,
    900: #18181b,
    950: #09090b
  )
);

$alphas: (4, 5, 6, 8, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90);

// --- Corner Radii ---
$radius-sharp:  2px;
$radius-xs:     3px;
$radius-sm:     6px;
$radius-md:     10px;
$radius-lg:     14px;
$radius-full:   9999px;

// --- Hairlines & Optical Borders ---
$border-hairline:        1px solid rgba(255, 255, 255, 0.16);
$border-hairline-subtle: 1px solid rgba(255, 255, 255, 0.10);
$border-hairline-strong: 1px solid rgba(255, 255, 255, 0.25);

// --- Motion & Transitions ---
$ease-tactile: cubic-bezier(0.16, 1, 0.3, 1);
$duration-fast: 150ms;
$duration-normal: 220ms;
$duration-slow: 350ms;