/* ========================================================================== iCase — DESIGN SYSTEM v2.0 · "Bloque" Archivo: static/css/icase-tokens.css Carga: PRIMERO, antes que cualquier otro CSS de iCase. Dirección: el azul #3498db y el fuego del logo son la identidad. Se usan como campos sólidos, no como detalles. Nada flota: los bloques se separan con filetes de 1px, no con sombras. La UI es recta; las fotos llevan el radio de una funda. Minimalista sin parecerse a Apple. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* ---- Marca ---- */ --ic-blue: #3498db; /* exacto al de icase.ar */ --ic-blue-hover: #2C89C9; --ic-blue-deep: #1F6FA8; /* pressed / texto de enlace sobre blanco */ --ic-blue-wash: #EAF4FB; /* fondos suaves */ --ic-blue-ring: rgba(52, 152, 219, .40); /* ---- Fuego del logo: SOLO urgencia (promos, ofertas, últimas unidades) ---- */ --ic-flame: #FF4F1F; --ic-flame-deep: #DC0000; --ic-flame-wash: #FFF0EB; --ic-gold: #FBC929; /* ---- Neutros con sesgo frío (elegidos, no heredados) ---- */ --ic-ink: #101418; /* texto principal */ --ic-ink-2: #3B444D; /* texto secundario */ --ic-ink-3: #6B767F; /* terciario / metadatos */ --ic-line: #DDE4EA; /* filetes: la unidad estructural del sistema */ --ic-line-soft: #EBF0F4; --ic-mist: #EDF1F5; /* fondo de sección alterna */ --ic-paper: #FFFFFF; /* ---- Sobre fondos oscuros / azules ---- */ --ic-on-blue: #FFFFFF; --ic-on-blue-soft: rgba(255,255,255,.80); --ic-on-blue-line: rgba(255,255,255,.26); --ic-on-ink: #F2F5F8; --ic-on-ink-soft: #9AA5AE; /* ---- Semántico ---- */ --ic-ok: #12874E; --ic-ok-wash: #E7F4ED; --ic-warn: #A9690A; --ic-warn-wash: #FDF3E2; --ic-wa: #25D366; /* ---- Tipografía ---- Figtree: geométrica de x-height alta, la más cercana a las letras del logo. Mono del sistema para metadatos: 0 KB de descarga. */ --ic-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ic-mono: ui-monospace, SFMono-Regular, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Escala fluida 375px → 1440px */ --ic-fs-display: clamp(2.0625rem, 1.47rem + 2.53vw, 3.75rem); /* 33 → 60 */ --ic-fs-h1: clamp(1.875rem, 1.34rem + 2.28vw, 2.9rem); /* 30 → 46 */ --ic-fs-h2: clamp(1.5rem, 1.18rem + 1.37vw, 2.25rem); /* 24 → 36 */ --ic-fs-h3: clamp(1.1875rem, 1.06rem + 0.53vw, 1.5rem); /* 19 → 24 */ --ic-fs-h4: 1.0625rem; --ic-fs-lead: clamp(1rem, 0.96rem + 0.16vw, 1.125rem); --ic-fs-body: 0.9375rem; --ic-fs-sm: 0.8125rem; --ic-fs-xs: 0.6875rem; --ic-lh-tight: 1.02; --ic-lh-snug: 1.16; --ic-lh-base: 1.6; --ic-ls-display: -0.035em; /* apretado: el logo es apretado */ --ic-ls-title: -0.025em; --ic-ls-body: -0.005em; --ic-ls-mono: 0.12em; /* metadatos: separados y en mayúscula */ --ic-fw-regular: 400; --ic-fw-medium: 500; --ic-fw-semi: 600; --ic-fw-bold: 700; --ic-fw-black: 800; /* display: el peso del logo */ /* ---- Espaciado (base 4) ---- */ --ic-s1: 4px; --ic-s2: 8px; --ic-s3: 12px; --ic-s4: 16px; --ic-s5: 20px; --ic-s6: 24px; --ic-s7: 32px; --ic-s8: 40px; --ic-s9: 48px; --ic-s10: 64px; --ic-s11: 80px; --ic-s12: 96px; --ic-section-y: clamp(52px, 3.4vw + 38px, 100px); --ic-section-y-sm: clamp(32px, 2vw + 24px, 60px); /* ---- Layout ---- */ --ic-container: 1320px; --ic-container-narrow: 720px; --ic-gutter: 20px; --ic-header-h: 56px; --ic-adbar-h: 34px; /* ---- Radios — LA FIRMA DEL SISTEMA ---- UI recta. Las fotos llevan el radio de una funda. */ --ic-r-ui: 2px; /* botones, inputs, chips, badges */ --ic-r-case: 24px; /* SOLO contenedores de foto / producto */ --ic-r-case-sm: 14px; --ic-r-pill: 999px; /* solo el contador del carrito */ /* ---- Elevación: casi inexistente. La estructura la hacen los filetes. ---- */ --ic-sh-pop: 0 8px 28px rgba(16, 20, 24, .12); /* mega menú */ --ic-sh-over: 0 0 0 100vmax rgba(16, 20, 24, .45); /* overlay */ --ic-sh-drawer: 12px 0 48px rgba(16, 20, 24, .18); --ic-sh-focus: 0 0 0 3px var(--ic-blue-ring); /* ---- Movimiento: cortes, no transiciones largas ---- */ --ic-ease: cubic-bezier(.32, .72, 0, 1); --ic-ease-out: cubic-bezier(.16, 1, .3, 1); --ic-t-fast: 120ms; --ic-t-base: 200ms; --ic-t-slow: 340ms; /* ---- Capas ---- */ --ic-z-sticky: 100; --ic-z-header: 900; --ic-z-overlay: 990; --ic-z-drawer: 1000; --ic-z-modal: 1100; --ic-z-toast: 1200; } @media (min-width: 768px) { :root { --ic-gutter: 28px; --ic-header-h: 64px; } } @media (min-width: 1200px) { :root { --ic-gutter: 40px; --ic-header-h: 68px; } } /* -------------------------------------------------------------------------- 2. RESET (envuelto en :where() → especificidad 0, nunca pisa componentes) -------------------------------------------------------------------------- */ .ic, .ic *, .ic *::before, .ic *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body { margin: 0; /* el UA mete 8px y desalinea todo bloque a sangre */ font-family: var(--ic-font); font-size: var(--ic-fs-body); line-height: var(--ic-lh-base); letter-spacing: var(--ic-ls-body); color: var(--ic-ink); background: var(--ic-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(.ic) :where(img, video) { display: block; max-width: 100%; height: auto; } :where(.ic) :where(svg) { display: block; width: 1em; height: 1em; flex: none; } :where(.ic) :where(a) { color: inherit; text-decoration: none; } :where(.ic) :where(button, input, select, textarea) { font: inherit; color: inherit; } /* Rio estiliza elementos semánticos POR NOMBRE (footer, header, aside…) con sus variables --footer-background y compañía. Un