/** * theme.css — CloudHesive Design System * Source: book-mark/CloudHesive — Brand Book 2026 V.1 (October 2025) * Mirror exacto del template canónico de tailwind-v4-skill. */ /* ─── dark variant: clase .dark en cualquier ancestro ─────── */ /* En Tailwind CDN no podemos usar @custom-variant — emulamos con clase */ :root { /* ─── Brand palette ────────────────────────────────────── Valores raw, nunca cambian con el tema. Cada uno está expuesto bajo DOS nombres: --color-brand-X → canónico (Tailwind v4 @theme convention) --brand-X → alias corto (usado en charts, badges, etc.) Mantener ambos sincronizados — si cambia el hex, cambialo acá una vez. */ --color-brand-primary: #000024; --color-brand-primary-soft: #0a1732; --color-brand-accent: #008fd0; --color-brand-surface: #e9f3fa; --color-brand-success: #08bdba; --color-brand-violet: #a56eff; --color-brand-warning: #f1c21b; --color-brand-magenta: #ee5396; --color-brand-danger: #ed4739; --brand-primary: var(--color-brand-primary); --brand-primary-soft: var(--color-brand-primary-soft); --brand-accent: var(--color-brand-accent); --brand-surface: var(--color-brand-surface); --brand-success: var(--color-brand-success); --brand-violet: var(--color-brand-violet); --brand-warning: var(--color-brand-warning); --brand-magenta: var(--color-brand-magenta); --brand-danger: var(--color-brand-danger); /* Tipografía */ --font-sans: 'Figtree', 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Figtree', system-ui, sans-serif; /* Radii */ --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; } /* ─── Light theme (default) ────────────────────────────────── */ /* Reglas semánticas de tokens (NO romper): - primary → la superficie de alto contraste de la marca. Light: navy. Dark: surface (invierte como shadcn). - accent → el color interactivo de marca (cyan). Igual en ambos temas. - muted → fondos sutiles, hover states, header de tabla. - secondary → variante de botón/chip neutro (hoy === muted en valor, distinto en semántica). Si necesitás diferenciarlos, cambiá sólo el valor de --secondary, no el de --muted. - border → bordes estructurales (cards, separadores). - input → bordes de inputs (mismo valor que --border por elección, expuesto aparte para permitir un focus-state distinto). - info → alias semántico de accent (mismo color). Existe para que el código de "avisos informativos" lea como `info`, no `accent`. Si los rediseñás distintos, cambiá sólo --info acá. */ :root { --background: #ffffff; --foreground: #000024; --muted: #e9f3fa; --muted-foreground: #0a1732; --card: #ffffff; --card-foreground: #000024; --popover: #ffffff; --popover-foreground: #000024; --border: #d4e6f4; --input: #d4e6f4; --ring: #008fd0; --primary: #000024; --primary-foreground: #ffffff; --secondary: #e9f3fa; --secondary-foreground: #000024; --accent: #008fd0; --accent-foreground: #ffffff; --destructive: #ed4739; --destructive-foreground: #ffffff; --success: #08bdba; --success-foreground: #ffffff; --warning: #f1c21b; --warning-foreground: #000024; /* alias semántico de accent — ver nota arriba */ --info: var(--accent); --info-foreground: var(--accent-foreground); /* Marca extendida con foregrounds — usar en lugar de hex literal */ --violet: var(--color-brand-violet); --violet-foreground: #ffffff; --magenta: var(--color-brand-magenta); --magenta-foreground: #ffffff; } /* ─── Dark theme — toggle con class="dark" en ──────── */ /* primary se invierte (convención shadcn): superficie de alto contraste */ .dark { --background: #000024; --foreground: #e9f3fa; --muted: #16213e; --muted-foreground: #c0d6e6; --card: #0a1732; --card-foreground: #e9f3fa; --popover: #0a1732; --popover-foreground: #e9f3fa; --border: #243154; --input: #243154; --ring: #008fd0; --primary: #e9f3fa; --primary-foreground: #000024; --secondary: #16213e; --secondary-foreground: #e9f3fa; --accent: #008fd0; --accent-foreground: #ffffff; --destructive: #ed4739; --destructive-foreground: #ffffff; --success: #08bdba; --success-foreground: #000024; --warning: #f1c21b; --warning-foreground: #000024; --info: var(--accent); --info-foreground: var(--accent-foreground); --violet: var(--color-brand-violet); --violet-foreground: #ffffff; --magenta: var(--color-brand-magenta); --magenta-foreground: #ffffff; } /* ─── Theme variants (opcionales) ────────────────────────── Cada variant sobreescribe primary/accent juntos para mantener consistencia light/dark. Si necesitás que primary varíe entre temas, declarar bajo `:root.theme-X` y `.dark.theme-X` por separado. */ :root.theme-accent, .dark.theme-accent { --primary: var(--color-brand-accent); --primary-foreground: #ffffff; --ring: var(--color-brand-accent); } :root.theme-violet, .dark.theme-violet { --primary: var(--color-brand-violet); --primary-foreground: #ffffff; --ring: var(--color-brand-violet); --accent: var(--color-brand-violet); } :root.theme-forest, .dark.theme-forest { --primary: var(--color-brand-success); --primary-foreground: #000024; --ring: var(--color-brand-success); --accent: var(--color-brand-success); --accent-foreground: #000024; } /* ─── Resets y base ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.18s ease, color 0.18s ease; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ─── Utilidad: tokens semánticos como utilities Tailwind-like ─── */ /* Estos los expone Tailwind v4 via @theme; acá los emulamos para CDN. */ .bg-background { background-color: var(--background); } .bg-foreground { background-color: var(--foreground); } .bg-muted { background-color: var(--muted); } .bg-card { background-color: var(--card); } .bg-popover { background-color: var(--popover); } .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-accent { background-color: var(--accent); } .bg-destructive { background-color: var(--destructive); } .bg-success { background-color: var(--success); } .bg-warning { background-color: var(--warning); } .bg-info { background-color: var(--info); } .text-foreground { color: var(--foreground); } .text-background { color: var(--background); } .text-muted-foreground { color: var(--muted-foreground); } .text-card-foreground { color: var(--card-foreground); } .text-primary { color: var(--primary); } .text-primary-foreground { color: var(--primary-foreground); } .text-secondary-foreground { color: var(--secondary-foreground); } .text-accent { color: var(--accent); } .text-accent-foreground { color: var(--accent-foreground); } .text-destructive { color: var(--destructive); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .border-border { border-color: var(--border); } .border-input { border-color: var(--input); } .border-primary { border-color: var(--primary); } .border-accent { border-color: var(--accent); } .border-destructive { border-color: var(--destructive); } .ring-ring { --tw-ring-color: var(--ring); } /* Brand palette utilities (raw, no semantic) */ .bg-brand-primary { background-color: var(--color-brand-primary); } .bg-brand-primary-soft { background-color: var(--color-brand-primary-soft); } .bg-brand-accent { background-color: var(--color-brand-accent); } .bg-brand-surface { background-color: var(--color-brand-surface); } .bg-brand-success { background-color: var(--color-brand-success); } .bg-brand-violet { background-color: var(--color-brand-violet); } .bg-brand-warning { background-color: var(--color-brand-warning); } .bg-brand-magenta { background-color: var(--color-brand-magenta); } .bg-brand-danger { background-color: var(--color-brand-danger); } /* Semantic violet/magenta (con foreground) */ .bg-violet { background-color: var(--violet); color: var(--violet-foreground); } .bg-magenta { background-color: var(--magenta); color: var(--magenta-foreground); } .text-violet { color: var(--violet); } .text-magenta { color: var(--magenta); } /* Custom scrollbar */ .thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .thin-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); } .thin-scroll::-webkit-scrollbar-track { background: transparent; } /* Smooth transitions for theme swap on common surfaces */ .theme-anim, .theme-anim * { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.12s ease; } /* Radial highlight for hero/login backgrounds — reusable */ .brand-radial-light { background: radial-gradient(ellipse 70% 50% at 50% 60%, rgba(0,143,208,0.06), transparent 60%), var(--background); } .dark .brand-radial-light { background: radial-gradient(ellipse 80% 60% at 50% 70%, rgba(0,143,208,0.18), transparent 60%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(165,110,255,0.12), transparent 60%), var(--background); } /* ─── Tint helpers ───────────────────────────────────────── For elements that are colored by data (status, tag, member, chart series). Pass the dynamic color in via the --tint custom property: … Variants: .tint-soft → 10% bg tint + tint-colored text (chip / pill) .tint-soft-15 → 15% bg tint (icon halo) .tint-bg-soft → 10% bg tint, foreground untouched (panel) .tint-bg-faint → 6% bg tint (row hover) .tint-text → just text color .tint-fill → solid tint background .tint-border → tint-colored 1px border + text .tint-bar → bar-style solid background .tint-ring-soft → soft tint ring around element (ring-2 equivalent) The mix() function falls back to plain alpha values in older engines. */ .tint-soft { background-color: color-mix(in srgb, var(--tint) 10%, transparent); color: var(--tint); } .tint-soft-15 { background-color: color-mix(in srgb, var(--tint) 15%, transparent); color: var(--tint); } .tint-bg-soft { background-color: color-mix(in srgb, var(--tint) 10%, transparent); } .tint-bg-faint { background-color: color-mix(in srgb, var(--tint) 6%, transparent); } .tint-text { color: var(--tint); } .tint-fill { background-color: var(--tint); color: #fff; } .tint-border { border-color: color-mix(in srgb, var(--tint) 50%, transparent); color: var(--tint); } .tint-bar { background-color: var(--tint); } .tint-ring-soft { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint) 25%, transparent); } /* Hero halo — soft radial behind a status badge / icon */ .tint-halo { position: relative; background-color: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint); } .tint-halo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: var(--tint); opacity: 0.25; animation: tint-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes tint-ping { 75%, 100% { transform: scale(1.6); opacity: 0; } } /* Uptime/status day cell (Status page 90-day bars) */ .uptime-day { display: block; width: 100%; height: 100%; border-radius: 2px; background-color: var(--tint); opacity: 0.85; cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; } .uptime-day:hover { opacity: 1; } .uptime-day.is-hot { opacity: 1; transform: scaleY(1.1); } /* Tag/badge mono — used for taxonomy chips throughout (Status, Board, Inbox) */ .tag-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); font-size: 10px; font-weight: 500; font-family: var(--font-mono, ui-monospace, monospace); background-color: color-mix(in srgb, var(--tint) 10%, transparent); color: var(--tint); line-height: 1.4; } .tag-chip .dot { display: inline-block; height: 0.375rem; width: 0.375rem; border-radius: 9999px; background-color: var(--tint); } /* Dot indicator (legend swatches, list bullets) */ .swatch-dot { display: inline-block; height: 0.5rem; width: 0.5rem; border-radius: 9999px; background-color: var(--tint); } .swatch-square { display: inline-block; height: 0.625rem; width: 0.75rem; border-radius: var(--radius-xs); background-color: var(--tint); } /* ─── Wizard ──────────────────────────────────────────────── The 6-step wizard uses a shared visual language for step cells, option cards, and the timeline-preview cards. */ .wiz-step-num { height: 1.75rem; width: 1.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; border: 1px solid var(--border); background-color: var(--background); color: var(--muted-foreground); transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .wiz-step-num.is-active { background-color: var(--accent); color: var(--accent-foreground); border-color: var(--accent); } .wiz-step-num.is-done { background-color: var(--success); color: var(--success-foreground); border-color: var(--success); } .wiz-step-label { font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.18s ease; } .wiz-step-label.is-active { color: var(--foreground); font-weight: 600; } .wiz-step-connector { width: 3rem; height: 1px; background-color: var(--border); } .wiz-step-connector.is-done { background-color: var(--success); } .wiz-option-card { text-align: left; border-radius: var(--radius-lg); border: 1px solid var(--border); background-color: var(--card); padding: 1.25rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .wiz-option-card:hover { border-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent); transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01); } .wiz-option-card.is-selected { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 5%, var(--card)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); } .wiz-option-icon { height: 2.5rem; width: 2.5rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--muted); color: var(--muted-foreground); transition: background-color 0.18s, color 0.18s; } .wiz-option-card.is-selected .wiz-option-icon { background-color: var(--accent); color: var(--accent-foreground); } /* Wizard preview columns/cards (Step 4 — Timeline) */ .timeline-preview { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0.5rem; } .timeline-col { background-color: color-mix(in srgb, var(--muted) 80%, transparent); border-radius: var(--radius-md); padding: 0.625rem; min-height: 8rem; display: flex; flex-direction: column; gap: 0.5rem; } .timeline-col-head { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } .timeline-card { background-color: var(--card); border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 0.5rem 0.625rem; font-size: 0.6875rem; line-height: 1.4; display: flex; flex-direction: column; gap: 0.25rem; position: relative; } .timeline-card[data-urgency="high"] { border-left: 3px solid var(--destructive); padding-left: 0.5rem; } .timeline-card[data-urgency="med"] { border-left: 3px solid var(--brand-warning); padding-left: 0.5rem; } .timeline-card[data-urgency="low"] { border-left: 3px solid var(--success); padding-left: 0.5rem; } .timeline-card.is-condensed { padding: 0.375rem 0.5rem; font-size: 0.625rem; } .timeline-card.is-spacious { padding: 0.75rem 0.75rem; gap: 0.5rem; } /* Soft tinted gradient panel — used for onboarding carousel slides */ .tour-card-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 12%, transparent), var(--card)); } /* Card variant styles (set by data-card-style on root) */ [data-card-style="filled"] .surface-card { background-color: var(--muted); border-color: transparent; } [data-card-style="elevated"] .surface-card { background-color: var(--card); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,36,0.04), 0 6px 24px -8px rgba(0,0,36,0.10); } .dark[data-card-style="elevated"] .surface-card, .dark [data-card-style="elevated"] .surface-card { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 28px -10px rgba(0,143,208,0.18); } /* ─── Super Pro UX/UI Enhancements ───────────────────────── */ .glass-panel { background-color: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .dark .glass-panel { background-color: color-mix(in srgb, var(--card) 50%, transparent); border: 1px solid color-mix(in srgb, var(--border) 40%, transparent); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); } .step-transition-enter { opacity: 0; transform: translateY(10px); animation: slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes slide-up-fade { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }