/* ============================================================ collqa — Design System · v1 Sistema base sobre el que se diseña TODO (landing, app, docs). Light + dark desde el inicio. Misma arquitectura que erp.figari.pe (clase .dark en + tokens semánticos + View Transitions), con la marca collqa: Andesita / Piedra / Cochinilla. Uso estático: + theme.js Uso en la app (Tailwind v4): portar el bloque de tokens a @theme y las superficies a .dark / :root:not(.dark) en resources/css/app.css. ============================================================ */ /* ---------- Constantes de marca (no cambian con el modo) ---------- */ :root{ /* Marca */ --collqa-andesita:#1E2228; --collqa-piedra:#EBEAE4; --collqa-cochinilla:#A8174A; --collqa-cochinilla-600:#8E1340; /* hover en claro */ --collqa-cochinilla-400:#BC1A53; /* hover en oscuro */ --collqa-pizarra:#59616B; /* Acento (único, <10% de la superficie — NO es color de error) */ --accent:#A8174A; --accent-hover:#BC1A53; --on-accent:#EBEAE4; /* Estados (rojo de error propio, distinto de Cochinilla) */ --success:#2E6F4E; --warning:#B8862E; --error:#C0392B; /* Tipografía */ --font-display:"Space Grotesk","Helvetica Neue",Arial,system-ui,sans-serif; --font-text:"Inter",system-ui,-apple-system,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* Escala tipográfica (12·14·16·20·24·32·40·56) */ --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.5rem; --text-4xl:3.5rem; /* Geometría */ --radius-sm:6px; --radius:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --hairline:1px; --maxw:1120px; /* Easing y duración (igual filosofía que erp.figari.pe) */ --ease-pop:cubic-bezier(0.34,1.56,0.64,1); --ease-base:cubic-bezier(0.4,0,0.2,1); --dur-fast:0.15s; --dur:0.25s; --dur-slow:0.4s; /* Z-index */ --z-sticky:10; --z-dropdown:20; --z-overlay:30; --z-modal:40; --z-toast:50; } /* ---------- Superficies: DARK (default, firma de marca) ---------- */ :root, :root.dark{ --bg:#0E0F10; /* lienzo (stage) */ --bg-2:#141517; /* fondo secundario */ --surface:#17181A; /* tarjetas/paneles */ --surface-2:#1C1D1F; /* hover de tarjeta */ --elevated:#191A1B; /* modales/popovers */ --field:#0E0F10; /* inputs */ --border:rgba(235,234,228,0.09); --border-strong:rgba(235,234,228,0.18); --text:#EBEAE4; /* Piedra */ --text-2:rgba(235,234,228,0.60); --text-3:rgba(235,234,228,0.40); --text-disabled:rgba(235,234,228,0.24); --mark-ink:#EBEAE4; /* el racimo del logo en oscuro = Piedra (logo Inv) */ --panel-flip:#EBEAE4; /* banda invertida (sección clara dentro de dark) */ --panel-flip-text:#1E2228; --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow:0 4px 14px -2px rgba(0,0,0,0.5); --shadow-md:0 10px 30px -6px rgba(0,0,0,0.55); --shadow-lg:0 28px 70px -24px rgba(0,0,0,0.6); color-scheme:dark; } /* ---------- Superficies: LIGHT ---------- */ :root.light{ --bg:#EBEAE4; /* Piedra (lienzo) */ --bg-2:#E4E2DA; --surface:#F4F3EF; /* Superficie (tarjetas) */ --surface-2:#EFEEE8; --elevated:#FFFFFF; /* Blanco (modales/campos) */ --field:#FFFFFF; --border:#DDDBD3; /* Borde */ --border-strong:rgba(30,34,40,0.20); --text:#1E2228; /* Andesita */ --text-2:#59616B; /* Pizarra */ --text-3:#8A8E92; --text-disabled:rgba(30,34,40,0.28); --accent:#A8174A; --accent-hover:#8E1340; --mark-ink:#1E2228; /* el racimo del logo en claro = Andesita (logo Ink) */ --panel-flip:#1E2228; /* banda invertida (sección oscura dentro de light) */ --panel-flip-text:#EBEAE4; --shadow-sm:0 1px 2px rgba(30,34,40,0.05); --shadow:0 4px 14px -2px rgba(30,34,40,0.08); --shadow-md:0 10px 30px -6px rgba(30,34,40,0.10); --shadow-lg:0 28px 70px -24px rgba(30,34,40,0.12); color-scheme:light; } /* ============================================================ Base ============================================================ */ *{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--font-text);line-height:1.5; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:background var(--dur-slow) ease,color var(--dur-slow) ease; } ::selection{background:var(--accent);color:var(--on-accent);} a{color:inherit;text-decoration:none;} img,svg{display:block;} h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;margin:0;} .mono{font-family:var(--font-mono);} .tnum{font-variant-numeric:tabular-nums;} /* cifras tabulares para montos/tablas */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px);} /* ============================================================ Logo (theme-aware vía currentColor: el racimo usa --mark-ink, el silo activo siempre Cochinilla). Un solo SVG sirve light+dark. ============================================================ */ .collqa-mark{color:var(--mark-ink);} .collqa-mark .ring{stroke:currentColor;fill:none;} .collqa-mark .terr{stroke:currentColor;opacity:0.24;} .collqa-mark .active{fill:var(--accent);transform-box:fill-box;transform-origin:center;} .collqa-wm{font-family:var(--font-mono);font-weight:500;letter-spacing:-0.5px;color:var(--text);} @keyframes silo{0%,100%{opacity:.82;transform:scale(1);}50%{opacity:1;transform:scale(1.1);}} .collqa-mark.is-animated .active{animation:silo 3.8s ease-in-out infinite;} /* ============================================================ Componentes base ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-display);font-weight:600;font-size:var(--text-sm); border-radius:var(--radius);border:1px solid transparent;cursor:pointer; padding:11px 20px;transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease, color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-pop);} .btn:active{transform:translateY(1px);} .btn-primary{background:var(--accent);color:var(--on-accent);} .btn-primary:hover{background:var(--accent-hover);} .btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text);} .btn-ghost:hover{background:var(--surface);border-color:var(--text-3);} .btn-lg{padding:15px 30px;font-size:var(--text-base);} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md); padding:24px;transition:border-color var(--dur) ease,background var(--dur) ease,box-shadow var(--dur) ease;} .card:hover{border-color:var(--border-strong);background:var(--surface-2);} .field{width:100%;background:var(--field);border:1px solid var(--border-strong);border-radius:var(--radius); color:var(--text);font-family:var(--font-text);font-size:var(--text-md);padding:12px 14px; transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;} .field::placeholder{color:var(--text-3);} .field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);} .badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-xs); letter-spacing:0.05em;padding:4px 9px;border-radius:999px;border:1px solid var(--border);color:var(--text-2);} .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);} .badge.success{color:var(--success);} .badge.success .dot{background:var(--success);} .badge.warning{color:var(--warning);} .badge.warning .dot{background:var(--warning);} .badge.error{color:var(--error);} .badge.error .dot{background:var(--error);} .kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono); font-size:var(--text-xs);letter-spacing:0.15em;color:var(--text-2);text-transform:uppercase;} .kicker::before{content:"";width:18px;height:1px;background:var(--accent);} /* Toggle de tema */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:var(--radius);border:1px solid var(--border-strong);background:transparent;color:var(--text); cursor:pointer;transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease;} .theme-toggle:hover{background:var(--surface);border-color:var(--text-3);} .theme-toggle .sun{display:none;} .theme-toggle .moon{display:block;} :root.light .theme-toggle .sun{display:block;} :root.light .theme-toggle .moon{display:none;} /* ============================================================ Animaciones (replican el set de erp.figari.pe) ============================================================ */ @keyframes fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} @keyframes stagger-fade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} @keyframes pop{from{opacity:0;transform:translateY(14px) scale(.975);}to{opacity:1;transform:none;}} @keyframes tick-up{from{opacity:0;transform:translateY(0.4em);}to{opacity:1;transform:none;}} .anim-fade{animation:fade-in var(--dur) var(--ease-base) both;} .anim-pop{animation:pop var(--dur) var(--ease-pop) both;} [data-stagger]>*{animation:stagger-fade var(--dur) var(--ease-base) both;} [data-stagger]>*:nth-child(2){animation-delay:.06s;} [data-stagger]>*:nth-child(3){animation-delay:.12s;} [data-stagger]>*:nth-child(4){animation-delay:.18s;} /* ============================================================ View Transitions — revelado circular del cambio de tema (theme.js dispara document.startViewTransition; ver el JS) ============================================================ */ ::view-transition-old(root), ::view-transition-new(root){animation:none;mix-blend-mode:normal;} ::view-transition-old(root){z-index:1;} ::view-transition-new(root){z-index:2147483646;} @media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto;} .collqa-mark.is-animated .active{animation:none;} .anim-fade,.anim-pop,[data-stagger]>*{animation:none;} }