/* ============================================ Stryhub Design Tokens v1 ============================================ Tokens centralizados para cores, tipografia, spacing, radius, shadows e motion. Suporta tema claro (default) e escuro via [data-theme="dark"] no . ============================================ */ :root { /* Brand */ --color-primary: #0d6efd; --color-primary-hover: #0b5ed7; --color-primary-soft: #e8f0fe; --color-primary-rgb: 13, 110, 253; /* Status */ --color-success: #198754; --color-success-soft: #d1e7dd; --color-warning: #ffc107; --color-warning-soft: #fff3cd; --color-danger: #dc3545; --color-danger-soft: #f8d7da; --color-info: #0dcaf0; --color-info-soft: #cff4fc; /* Surfaces (light) */ --bg-page: #f6f8fb; --bg-card: #ffffff; --bg-muted: #f1f3f5; --bg-subtle: #f8f9fa; --bg-navbar: #0f172a; --bg-sidebar: #ffffff; /* Text (light) */ --text-1: #0f172a; --text-2: #475569; --text-3: #94a3b8; --text-on-primary: #ffffff; /* Borders */ --border: #e3e6ea; --border-soft: #f0f2f5; --border-strong: #cbd5e1; /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.875rem; /* 30px */ --fs-4xl: 2.25rem; /* 36px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.25; --lh-snug: 1.4; --lh-base: 1.55; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* Shadows (light) */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10); --shadow-focus: 0 0 0 3px rgba(13, 110, 253, 0.18); /* Motion */ --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1); --transition-base: 200ms cubic-bezier(.4, 0, .2, 1); --transition-slow: 300ms cubic-bezier(.4, 0, .2, 1); /* Layout */ --sidebar-width: 250px; --topbar-height: 48px; /* Z-index */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1050; --z-toast: 1080; } /* Dark theme overrides */ [data-theme="dark"] { --bg-page: #0b1220; --bg-card: #131b2c; --bg-muted: #1a2236; --bg-subtle: #182037; --bg-navbar: #0a0f1c; --bg-sidebar: #131b2c; --text-1: #e6edf7; --text-2: #aab4c4; --text-3: #6c7a8e; --border: #243049; --border-soft: #1c2640; --border-strong: #334158; --color-primary-soft: rgba(13, 110, 253, 0.18); --color-success-soft: rgba(25, 135, 84, 0.18); --color-warning-soft: rgba(255, 193, 7, 0.16); --color-danger-soft: rgba(220, 53, 69, 0.18); --color-info-soft: rgba(13, 202, 240, 0.16); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px rgba(13, 110, 253, 0.30); }