/* ============================================================================ JAKOMI · TCG CAFÉ — DESIGN TOKENS (자코미) Drop-in design system. Warm, cozy, kawaii-premium. Built to satisfy: Impeccable Design · Emil Kowalski (Design Engineering) · Taste. ---------------------------------------------------------------------------- USO RÁPIDO 1) Copia las fuentes a /public/fonts/ (o ajusta las rutas en @font-face). 2) Importa este archivo una sola vez en tu root (globals.css / layout). 3) Usa las variables --jk-* y las clases .jk-* en tus componentes. 4) Modo oscuro: añade data-theme="dark" al , o se activa solo por prefers-color-scheme. El oscuro es ESPRESSO OXIDADO, nunca gris. ============================================================================ */ /* ---------- Fuentes (coloca los .ttf en /public/fonts) -------------------- */ @font-face{font-family:'Fredoka';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/Fredoka-500.ttf') format('truetype');} @font-face{font-family:'Fredoka';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/Fredoka-600.ttf') format('truetype');} @font-face{font-family:'Fredoka';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/Fredoka-700.ttf') format('truetype');} @font-face{font-family:'Nunito';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/Nunito-400.ttf') format('truetype');} @font-face{font-family:'Nunito';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/Nunito-700.ttf') format('truetype');} @font-face{font-family:'Nunito';font-weight:800;font-style:normal;font-display:swap;src:url('../fonts/Nunito-800.ttf') format('truetype');} @font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/Poppins-Medium.ttf') format('truetype');} @font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/Poppins-SemiBold.ttf') format('truetype');} /* ========================================================================== */ /* TOKENS */ /* ========================================================================== */ :root{ /* — Marca (valores crudos, no usar directo para fondos/texto) — */ --jk-cream:#F8F0E3; --jk-paper:#FCF8F0; --jk-avena:#ECDDC6; --jk-caramel:#A37955; --jk-caramel-press:#8A6342; --jk-cacao:#7B4B25; --jk-espresso:#4A301E; --jk-ink:#2E1E14; --jk-rose:#E9B0A9; --jk-rose-strong:#D98C92; --jk-coral:#E16B73; --jk-matcha:#9CAE84; /* — Tokens semánticos · TEMA CLARO ("Café con leche") — */ --jk-bg:#F6EDDF; /* lienzo */ --jk-surface:#FCF8F0; /* tarjetas */ --jk-surface-2:#F0E4D2; /* paneles, hovers sutiles */ --jk-text:#2E1E14; /* texto principal (12.x:1 sobre bg) */ --jk-text-muted:#7A5C44; /* texto secundario */ --jk-text-subtle:#A98D72; /* placeholders, texto deshabilitado */ --jk-border:#E7D8C0; /* bordes hairline */ --jk-border-strong:#D9C3A5; --jk-primary:#A37955; /* acción principal */ --jk-primary-press:#8A6342; --jk-on-primary:#FFF8EE; --jk-accent:#E9B0A9; /* acento rosa (quirúrgico) */ --jk-accent-strong:#D98C92; --jk-pop:#E16B73; /* coral: ofertas/alertas — ≤5% del layout */ --jk-on-pop:#FFF8EE; --jk-ring:rgba(163,121,85,.55); /* foco */ --jk-overlay:rgba(46,30,20,.42); /* — Tipografía — */ --jk-font-display:'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif; --jk-font-sans:'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif; --jk-font-ui:'Poppins', var(--jk-font-sans); --jk-font-ko:'Gowun Dodum', var(--jk-font-sans); /* Escala tipográfica (rem) — salto dramático en display */ --jk-text-xs:.75rem; --jk-text-sm:.875rem; --jk-text-base:1rem; --jk-text-lg:1.125rem; --jk-text-xl:1.375rem; --jk-text-2xl:1.75rem; --jk-text-3xl:2.25rem; --jk-text-4xl:3rem; --jk-text-5xl:4rem; --jk-text-6xl:5.25rem; --jk-leading-tight:1.05; --jk-leading-snug:1.25; --jk-leading-normal:1.6; --jk-tracking-display:-0.02em; /* aprieta el Fredoka grande */ --jk-tracking-eyebrow:0.22em; /* eyebrows en MAYÚSCULAS */ /* — Espaciado · base 4px (densidad determinista) — */ --jk-1:4px; --jk-2:8px; --jk-3:12px; --jk-4:16px; --jk-5:20px; --jk-6:24px; --jk-8:32px; --jk-10:40px; --jk-12:48px; --jk-16:64px; --jk-20:80px; --jk-24:96px; /* — Radios (armónicos; hijo = padre − padding) — */ --jk-r-sm:8px; --jk-r-md:12px; --jk-r-lg:16px; --jk-r-xl:22px; --jk-r-2xl:28px; --jk-r-full:999px; /* — Sombras EN CAPAS, tintadas en espresso (profundidad real, no plastas) — */ --jk-shadow-xs:0 1px 2px rgba(74,48,30,.06); --jk-shadow-sm:0 1px 2px rgba(74,48,30,.05), 0 2px 6px rgba(74,48,30,.06); --jk-shadow-md:0 1px 2px rgba(74,48,30,.04), 0 6px 16px rgba(74,48,30,.08), 0 12px 28px rgba(74,48,30,.06); --jk-shadow-lg:0 2px 6px rgba(74,48,30,.05), 0 12px 28px rgba(74,48,30,.10), 0 30px 60px rgba(74,48,30,.10); --jk-shadow-pop:0 8px 22px rgba(225,107,115,.28); /* glow coral, raro */ --jk-ring-shadow:0 0 0 3px var(--jk-ring); --jk-inner-hi:inset 0 1px 0 rgba(255,255,255,.5); /* realce superior */ /* — Motion (físico, orgánico; nunca linear por defecto) — */ --jk-ease-out-quint:cubic-bezier(.22,1,.36,1); --jk-ease-out-expo:cubic-bezier(.16,1,.3,1); --jk-ease-in-out:cubic-bezier(.65,.05,.36,1); --jk-ease-back:cubic-bezier(.34,1.56,.64,1); /* leve overshoot tipo spring */ --jk-dur-fast:140ms; --jk-dur:220ms; --jk-dur-slow:360ms; --jk-maxw:1200px; } /* ---------- TEMA OSCURO · "Espresso oxidado" (jamás gris puro) ------------ */ :root[data-theme="dark"], .dark{ --jk-bg:#1E140E; --jk-surface:#271A12; --jk-surface-2:#33231A; --jk-text:#F3E7D6; --jk-text-muted:#C7AD92; --jk-text-subtle:#8C7359; --jk-border:#3D2B1F; --jk-border-strong:#4F3826; --jk-primary:#CBA67E; /* caramelo más claro para contraste en oscuro */ --jk-primary-press:#B58E63; --jk-on-primary:#1E140E; --jk-accent:#E9B0A9; --jk-accent-strong:#EFC3BC; --jk-pop:#E8767D; --jk-on-pop:#1E140E; --jk-ring:rgba(203,166,126,.55); --jk-overlay:rgba(0,0,0,.55); --jk-shadow-xs:0 1px 2px rgba(0,0,0,.4); --jk-shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.35); --jk-shadow-md:0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.45); --jk-shadow-lg:0 4px 10px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.55); --jk-inner-hi:inset 0 1px 0 rgba(255,255,255,.04); } /* Modo noche automático DESACTIVADO: Jakomi es SIEMPRE claro, sin importar el modo oscuro del sistema operativo. */ /* ========================================================================== */ /* BASE */ /* ========================================================================== */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;} body{ margin:0;background:var(--jk-bg);color:var(--jk-text); font-family:var(--jk-font-sans);font-size:var(--jk-text-base);line-height:var(--jk-leading-normal); font-weight:400; } h1,h2,h3,h4{font-family:var(--jk-font-display);font-weight:600;line-height:var(--jk-leading-tight); letter-spacing:var(--jk-tracking-display);color:var(--jk-cacao);margin:0 0 var(--jk-4);} .dark h1,.dark h2,.dark h3,.dark h4,:root[data-theme="dark"] h1{color:var(--jk-text);} h1{font-size:var(--jk-text-5xl);} h2{font-size:var(--jk-text-3xl);} h3{font-size:var(--jk-text-2xl);} p{margin:0 0 var(--jk-4);max-width:68ch;} a{color:var(--jk-primary);text-decoration:none;transition:color var(--jk-dur-fast) var(--jk-ease-out-quint);} a:hover{color:var(--jk-primary-press);} ::selection{background:var(--jk-rose);color:var(--jk-ink);} :focus-visible{outline:none;box-shadow:var(--jk-ring-shadow);border-radius:var(--jk-r-sm);} :lang(ko),.jk-ko{font-family:var(--jk-font-ko);} .jk-eyebrow{font-family:var(--jk-font-ui);font-weight:600;font-size:var(--jk-text-xs); letter-spacing:var(--jk-tracking-eyebrow);text-transform:uppercase;color:var(--jk-caramel);} /* ========================================================================== */ /* COMPONENTES */ /* ========================================================================== */ /* Botón primario — micro-interacción con peso físico */ .jk-btn{ --_bg:var(--jk-primary);--_fg:var(--jk-on-primary); display:inline-flex;align-items:center;justify-content:center;gap:var(--jk-2); font-family:var(--jk-font-ui);font-weight:600;font-size:var(--jk-text-sm); letter-spacing:.01em;line-height:1;cursor:pointer;border:0; padding:var(--jk-3) var(--jk-5);border-radius:var(--jk-r-md); color:var(--_fg);background:var(--_bg); box-shadow:var(--jk-shadow-sm), var(--jk-inner-hi); transition:transform var(--jk-dur) var(--jk-ease-out-quint), box-shadow var(--jk-dur) var(--jk-ease-out-quint), background-color var(--jk-dur-fast) var(--jk-ease-out-quint); will-change:transform; } .jk-btn:hover{transform:translateY(-2px);box-shadow:var(--jk-shadow-md), var(--jk-inner-hi);} .jk-btn:active{transform:translateY(0) scale(.985);box-shadow:var(--jk-shadow-xs);transition-duration:90ms;} .jk-btn--ghost{--_bg:transparent;--_fg:var(--jk-primary); box-shadow:inset 0 0 0 1.5px var(--jk-border-strong);} .jk-btn--ghost:hover{--_bg:var(--jk-surface-2);box-shadow:inset 0 0 0 1.5px var(--jk-primary);} .jk-btn--pop{--_bg:var(--jk-pop);--_fg:var(--jk-on-pop);} .jk-btn--pop:hover{box-shadow:var(--jk-shadow-pop), var(--jk-inner-hi);} /* Tarjeta — sombras en capas + elevación al hover */ .jk-card{ background:var(--jk-surface);border:1px solid var(--jk-border); border-radius:var(--jk-r-xl);padding:var(--jk-6); box-shadow:var(--jk-shadow-md); transition:transform var(--jk-dur-slow) var(--jk-ease-out-quint), box-shadow var(--jk-dur-slow) var(--jk-ease-out-quint); } .jk-card--interactive:hover{transform:translateY(-3px);box-shadow:var(--jk-shadow-lg);} /* Input */ .jk-input{ width:100%;font-family:var(--jk-font-sans);font-size:var(--jk-text-base);color:var(--jk-text); background:var(--jk-surface);border:1.5px solid var(--jk-border); border-radius:var(--jk-r-md);padding:var(--jk-3) var(--jk-4); transition:border-color var(--jk-dur-fast) var(--jk-ease-out-quint), box-shadow var(--jk-dur-fast) var(--jk-ease-out-quint); } .jk-input::placeholder{color:var(--jk-text-subtle);} .jk-input:focus{outline:none;border-color:var(--jk-primary);box-shadow:var(--jk-ring-shadow);} /* Chip / badge — pill, etiqueta UI */ .jk-chip{display:inline-flex;align-items:center;gap:var(--jk-2); font-family:var(--jk-font-ui);font-weight:600;font-size:var(--jk-text-xs); letter-spacing:.06em;text-transform:uppercase; color:var(--jk-cacao);background:var(--jk-surface-2); padding:var(--jk-2) var(--jk-3);border-radius:var(--jk-r-full);} .jk-chip--accent{background:var(--jk-rose);color:var(--jk-ink);} /* Skeleton — pulso de opacidad sutil (carga elegante) */ .jk-skeleton{position:relative;overflow:hidden;background:var(--jk-surface-2); border-radius:var(--jk-r-md);animation:jk-pulse 1.8s var(--jk-ease-in-out) infinite;} .jk-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,248,238,.45),transparent); animation:jk-shimmer 1.8s var(--jk-ease-in-out) infinite;} /* Layout helpers */ .jk-container{width:100%;max-width:var(--jk-maxw);margin-inline:auto;padding-inline:var(--jk-6);} .jk-stack>*+*{margin-top:var(--jk-4);} /* Patrón de marca opcional (confeti sutil) como fondo */ .jk-pattern{background-color:var(--jk-bg); background-image:radial-gradient(var(--jk-border-strong) 1.2px, transparent 1.2px); background-size:22px 22px;background-position:0 0;} /* ========================================================================== */ /* KEYFRAMES */ /* ========================================================================== */ @keyframes jk-pulse{0%,100%{opacity:1}50%{opacity:.6}} @keyframes jk-shimmer{100%{transform:translateX(100%)}} @keyframes jk-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .jk-rise{animation:jk-rise var(--jk-dur-slow) var(--jk-ease-out-expo) both;} /* ========================================================================== */ /* ACCESIBILIDAD — respeta prefers-reduced-motion */ /* ========================================================================== */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important;} .jk-btn:hover,.jk-card--interactive:hover{transform:none;} }