/* ============================================================ SKYN3T Design System — colors_and_type.css Dark-first. Extracted from skyn3t.cl + encrypt.skyn3t.cl + upgraded for SKYN3T AI Manager Workflow (sk-manager.com). Español (es-CL). Glassmorphism. Linear / Vercel / Railway vibe. ============================================================ */ /* ---------- Web fonts ---------- Inter: Google Fonts (no brand file uploaded — SUBSTITUTION, flag to user). JetBrains Mono: self-hosted from /fonts (brand files). ----------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* JetBrains Mono — full weight range, self-hosted */ @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100; src:url('fonts/JetBrainsMono-Thin.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:100; src:url('fonts/JetBrainsMono-ThinItalic.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:200; src:url('fonts/JetBrainsMono-ExtraLight.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:200; src:url('fonts/JetBrainsMono-ExtraLightItalic.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:300; src:url('fonts/JetBrainsMono-Light.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:300; src:url('fonts/JetBrainsMono-LightItalic.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; src:url('fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:400; src:url('fonts/JetBrainsMono-Italic.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; src:url('fonts/JetBrainsMono-Medium.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:500; src:url('fonts/JetBrainsMono-MediumItalic.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; src:url('fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:600; src:url('fonts/JetBrainsMono-SemiBoldItalic.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; src:url('fonts/JetBrainsMono-Bold.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:700; src:url('fonts/JetBrainsMono-BoldItalic.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:800; src:url('fonts/JetBrainsMono-ExtraBold.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:800; src:url('fonts/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype'); font-display:swap; } /* ============================================================ COLOR TOKENS (dark-first — no light variant yet) ============================================================ */ :root { /* — Base surfaces (from skyn3t.cl) — */ --sk-bg: #1a1a2e; /* canvas / app background */ --sk-bg-elevated: #0d1117; /* gradient target, deepest */ --sk-surface-1: #141528; /* cards, panels */ --sk-surface-2: #1f2040; /* hover / selected row */ --sk-surface-3: #262847; /* active / pressed */ /* — Primary: SKYN3T blue. Tech accent. Use with restraint. — */ --sk-primary-50: #e6f3fd; --sk-primary-100: #bde1fa; --sk-primary-300: #67c0f3; --sk-primary-500: #2199ea; /* brand */ --sk-primary-600: #1b82c9; --sk-primary-700: #156aa4; /* — Secondary: signal green — */ --sk-secondary-300: #6ee7b7; --sk-secondary-500: #10b981; --sk-secondary-400: #34d399; /* — Accent: cyan — */ --sk-cyan-200: #a5f3fc; --sk-cyan-300: #67e8f9; --sk-cyan-400: #22d3ee; /* — Warning: amber — */ --sk-warning-300: #fcd34d; --sk-warning-400: #fbbf24; --sk-warning-500: #f59e0b; /* — Danger — */ --sk-danger-400: #f87171; --sk-danger-500: #ef4444; --sk-danger-600: #dc2626; /* — Text (dark-first) — */ --sk-text-hi: #ffffff; /* títulos, números importantes */ --sk-text: #e6edf3; /* body copy */ --sk-text-muted: #c9d1d9; /* labels, soft copy */ --sk-text-dim: #8b949e; /* captions, timestamps */ --sk-text-disabled: #484f58; /* — Borders & dividers — */ --sk-border: rgba(255, 255, 255, 0.08); --sk-border-strong: rgba(255, 255, 255, 0.15); --sk-border-focus: rgba(33, 153, 234, 0.45); --sk-divider: rgba(255, 255, 255, 0.05); /* — Glass surfaces (the motif) — */ --sk-glass-bg: linear-gradient(145deg, rgba(33, 153, 234, 0.10), rgba(13, 17, 23, 0.85) ); --sk-glass-bg-strong: linear-gradient(145deg, rgba(33, 153, 234, 0.22), rgba(13, 17, 23, 0.95) ); --sk-glass-bg-flat: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(13, 17, 23, 0.70) ); --sk-glass-blur: blur(18px) saturate(140%); --sk-glass-blur-lg: blur(24px) saturate(140%); /* — App gradient (hero / login / empty states) — */ --sk-app-gradient: radial-gradient(1200px 600px at 15% -10%, rgba(33, 153, 234, 0.18), transparent 50%), radial-gradient(800px 500px at 100% 10%, rgba(34, 211, 238, 0.10), transparent 50%), linear-gradient(180deg, #1a1a2e 0%, #0d1117 100%); /* — Focus ring — */ --sk-ring: 0 0 0 2px rgba(33, 153, 234, 0.45); /* — Semantic — */ --sk-success: var(--sk-secondary-500); --sk-info: var(--sk-primary-500); --sk-warn: var(--sk-warning-500); --sk-danger: var(--sk-danger-500); /* ============================================================ SPACING / RADII / SHADOW ============================================================ */ --sk-space-0: 0; --sk-space-1: 4px; --sk-space-2: 8px; --sk-space-3: 12px; --sk-space-4: 16px; --sk-space-5: 20px; --sk-space-6: 24px; --sk-space-8: 32px; --sk-space-10: 40px; --sk-space-12: 48px; --sk-space-16: 64px; --sk-radius-xs: 4px; --sk-radius-sm: 6px; --sk-radius-md: 8px; --sk-radius-lg: 12px; --sk-radius-xl: 16px; --sk-radius-2xl: 20px; --sk-radius-full: 9999px; /* Discreet shadows — NO dramatic drops */ --sk-shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4); --sk-shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 16px rgba(0,0,0,0.35); --sk-shadow-3: 0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.45); --sk-shadow-glow: 0 0 0 1px rgba(33,153,234,0.35), 0 8px 32px rgba(33,153,234,0.18); /* ============================================================ MOTION ============================================================ */ --sk-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --sk-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sk-ease-in: cubic-bezier(0.4, 0, 1, 1); --sk-dur-fast: 150ms; --sk-dur-base: 200ms; --sk-dur-slow: 300ms; /* ============================================================ TYPOGRAPHY — families, scale, tracking ============================================================ */ --sk-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --sk-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Display scale (app headers, hero) */ --sk-text-display: 48px; /* hero numbers, metric headlines */ --sk-text-h1: 32px; --sk-text-h2: 24px; --sk-text-h3: 18px; --sk-text-h4: 16px; /* Body / ui */ --sk-text-body: 14px; /* default ui body */ --sk-text-sm: 13px; --sk-text-xs: 12px; --sk-text-2xs: 11px; /* labels, metadata */ --sk-text-micro: 10px; /* tags, tiny */ /* Line-heights */ --sk-lh-tight: 1.15; --sk-lh-snug: 1.35; --sk-lh-body: 1.55; --sk-lh-loose: 1.70; /* Letter-spacing */ --sk-ls-tight: -0.02em; /* display */ --sk-ls-snug: -0.01em; /* headers */ --sk-ls-normal: 0; --sk-ls-wide: 0.04em; /* overline / caps */ --sk-ls-extra: 0.08em; /* section labels */ } /* ============================================================ BASE ============================================================ */ html, body { background: var(--sk-bg); color: var(--sk-text); font-family: var(--sk-font-sans); font-size: var(--sk-text-body); line-height: var(--sk-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01', 'ss03'; } /* ============================================================ SEMANTIC TYPE UTILITIES ============================================================ */ .sk-display { font-family: var(--sk-font-sans); font-size: var(--sk-text-display); line-height: var(--sk-lh-tight); letter-spacing: var(--sk-ls-tight); font-weight: 700; color: var(--sk-text-hi); } .sk-h1 { font-size: var(--sk-text-h1); line-height: var(--sk-lh-tight); letter-spacing: var(--sk-ls-tight); font-weight: 700; color: var(--sk-text-hi); } .sk-h2 { font-size: var(--sk-text-h2); line-height: var(--sk-lh-snug); letter-spacing: var(--sk-ls-snug); font-weight: 600; color: var(--sk-text-hi); } .sk-h3 { font-size: var(--sk-text-h3); line-height: var(--sk-lh-snug); font-weight: 600; color: var(--sk-text-hi); } .sk-h4 { font-size: var(--sk-text-h4); line-height: var(--sk-lh-snug); font-weight: 600; color: var(--sk-text-hi); } .sk-body { font-size: var(--sk-text-body); line-height: var(--sk-lh-body); color: var(--sk-text); } .sk-body-sm { font-size: var(--sk-text-sm); line-height: var(--sk-lh-body); color: var(--sk-text); } .sk-muted { color: var(--sk-text-muted); } .sk-dim { color: var(--sk-text-dim); } .sk-label { font-size: var(--sk-text-2xs); line-height: 1.3; letter-spacing: var(--sk-ls-extra); text-transform: uppercase; color: var(--sk-text-dim); font-weight: 500; } .sk-mono { font-family: var(--sk-font-mono); font-size: var(--sk-text-sm); font-variant-ligatures: contextual; } .sk-code { font-family: var(--sk-font-mono); font-size: var(--sk-text-xs); padding: 2px 6px; border-radius: var(--sk-radius-sm); background: rgba(255,255,255,0.05); border: 1px solid var(--sk-border); color: var(--sk-primary-300); } .sk-kbd { font-family: var(--sk-font-mono); font-size: var(--sk-text-2xs); padding: 2px 6px; border-radius: var(--sk-radius-sm); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid var(--sk-border-strong); box-shadow: 0 1px 0 rgba(0,0,0,0.4); color: var(--sk-text-muted); } /* ============================================================ GLASS SURFACES ============================================================ */ .sk-glass { background: var(--sk-glass-bg); backdrop-filter: var(--sk-glass-blur); -webkit-backdrop-filter: var(--sk-glass-blur); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-2); } .sk-glass-flat { background: var(--sk-glass-bg-flat); backdrop-filter: var(--sk-glass-blur); -webkit-backdrop-filter: var(--sk-glass-blur); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); } /* ============================================================ SCROLLBAR ============================================================ */ .sk-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .sk-scroll::-webkit-scrollbar-track { background: transparent; } .sk-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } .sk-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); background-clip: padding-box; border: 2px solid transparent; }