/* MarkSoft Design System — Colors & Type * Sourced from src/dashboard/static/css/modern-dashboard.css, * twitch-dashboard-palette.css, fish-styles.css, index.css */ /* ---------------------------------------------------------- * FONTS * --------------------------------------------------------*/ @import url('https://fonts.googleapis.com/css2?family=Hind+Vadodara:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap'); :root { /* ========================================================== * PRIMARY PALETTE — Twitch Purple (brand) * ========================================================*/ --ms-primary: #6441A4; --ms-primary-rgb: 100, 65, 164; --ms-secondary: #9146FF; --ms-secondary-rgb: 145, 70, 255; --ms-light: #7B68EE; --ms-accent: #FF6B9D; /* streamer pink accent */ --ms-gradient-primary: linear-gradient(135deg, #6441A4 0%, #9146FF 100%); --ms-gradient-subtle: linear-gradient(135deg, rgba(100,65,164,.12), rgba(145,70,255,.06)); /* Twitch/Discord neutrals */ --ms-dark: #0e0e10; --ms-darker: #000000; --ms-card-bg: #18181b; --ms-border: #202225; /* Semantic */ --ms-success: #28a745; --ms-success-rgb: 40, 167, 69; --ms-danger: #dc3545; --ms-danger-rgb: 220, 53, 69; --ms-warning: #FFC107; --ms-warning-rgb: 255, 193, 7; --ms-info: #00b0f4; /* Discord link blue */ --ms-info-rgb: 0, 176, 244; /* Text on dark */ --ms-fg-1: #ffffff; --ms-fg-2: rgba(255,255,255,0.85); --ms-fg-3: rgba(255,255,255,0.65); --ms-fg-4: rgba(255,255,255,0.45); --ms-fg-muted: rgba(255,255,255,0.30); /* Surface system */ --ms-surface-0: rgba(255,255,255,0.03); --ms-surface-1: rgba(255,255,255,0.05); --ms-surface-2: rgba(255,255,255,0.08); --ms-surface-3: rgba(255,255,255,0.12); --ms-surface-border: rgba(255,255,255,0.10); --ms-surface-border-hi: rgba(255,255,255,0.20); /* Body gradient backdrop (dashboard chrome) */ --ms-body-gradient: linear-gradient(135deg, #0e0e10 0%, #18181b 50%, #202225 100%); /* ========================================================== * FISH PALETTE — deep space * ========================================================*/ --ms-fish-1: #0f0f23; --ms-fish-2: #1a1a2e; --ms-fish-3: #16213e; --ms-fish-4: #0f3460; --ms-fish-5: #533483; --ms-fish-bg: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%); --ms-fish-accent: #4CAF50; /* green primary CTA */ --ms-fish-accent-rgb: 76, 175, 80; --ms-fish-card-bg: rgba(255,255,255,0.05); /* ========================================================== * DISCORD EMBED PALETTE * ========================================================*/ --ms-discord-bg: #2f3136; --ms-discord-fullbg: #36393f; --ms-discord-tertiary: #202225; --ms-discord-text: #dcddde; --ms-discord-muted: #b9bbbe; --ms-discord-link: #00b0f4; --ms-discord-mention: #5865f2; /* ========================================================== * SPACING * ========================================================*/ --ms-space-xs: 8px; --ms-space-sm: 12px; --ms-space-md: 16px; --ms-space-lg: 24px; --ms-space-xl: 32px; --ms-space-xxl: 40px; /* ========================================================== * RADII * ========================================================*/ --ms-radius-sm: 8px; --ms-radius-md: 12px; --ms-radius-lg: 16px; --ms-radius-xl: 20px; --ms-radius-xxl: 24px; --ms-radius-pill: 999px; /* ========================================================== * SHADOWS (brand-colored, not neutral) * ========================================================*/ --ms-shadow-sm: 0 2px 8px rgba(0,0,0,0.15); --ms-shadow-md: 0 15px 35px rgba(0,0,0,0.10); --ms-shadow-lg: 0 20px 50px rgba(0,0,0,0.25); --ms-shadow-brand: 0 8px 25px rgba(145,70,255,0.40); --ms-shadow-brand-sm:0 4px 15px rgba(100,65,164,0.30); /* ========================================================== * TYPE * ========================================================*/ --ms-font-sans: 'Hind Vadodara', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; --ms-font-display: 'Hind Vadodara', 'Inter', system-ui, sans-serif; --ms-font-discord: 'Whitney', 'Inter', 'Helvetica Neue', Arial, sans-serif; --ms-font-mono: Consolas, 'SF Mono', Monaco, 'Liberation Mono', monospace; /* Scale (from the dashboard h1/h2/h3 observed sizes) */ --ms-fs-h1: 2.5rem; /* 40px */ --ms-fs-h2: 2rem; /* 32px */ --ms-fs-h3: 1.5rem; /* 24px */ --ms-fs-h4: 1.25rem; /* 20px */ --ms-fs-lg: 1.125rem; /* 18px */ --ms-fs-md: 1rem; /* 16px */ --ms-fs-sm: 0.875rem; /* 14px */ --ms-fs-xs: 0.75rem; /* 12px */ --ms-fs-micro: 0.6875rem; /* 11px — uppercase labels */ --ms-lh-tight: 1.2; --ms-lh-snug: 1.35; --ms-lh-body: 1.55; --ms-fw-light: 300; --ms-fw-regular: 400; --ms-fw-medium: 500; --ms-fw-semibold: 600; --ms-fw-bold: 700; --ms-fw-black: 800; } /* ------------------------------------------------------------ * SEMANTIC TEXT STYLES * ----------------------------------------------------------*/ .ms-h1 { font-family: var(--ms-font-display); font-size: var(--ms-fs-h1); font-weight: var(--ms-fw-bold); line-height: var(--ms-lh-tight); color: var(--ms-fg-1); letter-spacing: -0.02em; } .ms-h2 { font-family: var(--ms-font-display); font-size: var(--ms-fs-h2); font-weight: var(--ms-fw-semibold); line-height: var(--ms-lh-tight); color: var(--ms-fg-1); letter-spacing: -0.01em; } .ms-h3 { font-family: var(--ms-font-display); font-size: var(--ms-fs-h3); font-weight: var(--ms-fw-semibold); line-height: var(--ms-lh-snug); color: var(--ms-fg-1); } .ms-h4 { font-size: var(--ms-fs-h4); font-weight: var(--ms-fw-semibold); color: var(--ms-fg-1); } .ms-p { font-family: var(--ms-font-sans); font-size: var(--ms-fs-md); font-weight: var(--ms-fw-regular); line-height: var(--ms-lh-body); color: var(--ms-fg-2); } .ms-small { font-size: var(--ms-fs-sm); color: var(--ms-fg-3); line-height: var(--ms-lh-body); } .ms-micro { font-size: var(--ms-fs-micro); font-weight: var(--ms-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-fg-3); } .ms-code { font-family: var(--ms-font-mono); font-size: 0.9em; padding: 0.15em 0.4em; border-radius: 6px; background: rgba(255,255,255,0.08); color: var(--ms-fg-1); }