/* ============================================================================= TOKENS DE MARCA — ORBENSE · PORTAL DEL PROYECTO ----------------------------------------------------------------------------- Cliente: Orbense · Marcelo Martin Soazo Proyecto: Portal del proyecto · Concepto Creativo · 2026 Contrato completo de nombres en docs/TOKENS.md. PIEL PROVISIONAL. La identidad de marca de Orbense y Ofrilux esta en desarrollo (Fase 2). Esta paleta es la del sistema de documentos con el que se entrego la Fase 1, y existe para que el portal tenga caracter desde el primer dia. Cuando la identidad se apruebe, se reemplazan los VALORES de los primitivos y nada mas: ningun bloque cambia. Paleta monocromatica rosa viejo, con roles definidos: · Blanco → fondo base (--cc-bg) y superficies (--cc-surface) · Rosa lavado → secciones alternas (--cc-bg-alt) · Vino profundo → color de marca: titulos, filetes, fondos oscuros · Rosa suave → superficie de acento: botones primarios, bandas. NUNCA texto. Ver --cc-surface-accent. Las secciones oscuras NO usan clases propias: se resuelven con los modificadores del chasis .cc-section--dark y .cc-section--tinted. El "oscuro" de esta marca es el vino de --cc-brand, no negro. NO renombrar ni eliminar ningun token: el chasis los consume por nombre. ============================================================================= */ :root { /* ---------- PRIMITIVOS DE MARCA ---------- Un bloque NUNCA los usa directamente. Existen para que cambiar la marca sea editar estas lineas y nada mas. */ --cc-c-ink: #352f37; /* casi negro con temperatura calida */ --cc-c-brand: #7c3d4a; /* vino profundo: el color de la marca */ --cc-c-brand-2: #9a5563; /* vino medio, para texto pequeno y enlaces */ --cc-c-accent: #8f5a64; /* rosa profundo, legible como texto */ --cc-c-rose: #eebec1; /* rosa de acento. SUPERFICIE, nunca texto */ --cc-c-rose-mid: #e2a2a8; /* rosa de acento en hover */ --cc-c-rose-soft: #d3a8b0; /* rosa medio: filetes, barras, bordes */ --cc-c-wash: #faf4f5; /* rosa lavado: alternas y superficies suaves */ --cc-c-veil: #ecd9dc; /* rosa velado: rellenos de segundo nivel */ --cc-c-white: #ffffff; /* ---------- COLOR ---------- */ --cc-bg: var(--cc-c-white); --cc-bg-alt: var(--cc-c-wash); --cc-surface: var(--cc-c-white); --cc-ink: var(--cc-c-ink); --cc-ink-soft: #635e68; --cc-ink-inverse: #fffafb; /* blanco calido: el blanco puro sobre vino vibra */ --cc-brand: var(--cc-c-brand); --cc-brand-2: var(--cc-c-brand-2); --cc-accent: var(--cc-c-accent); --cc-line: #e9e1e3; --cc-overlay: color-mix(in srgb, var(--cc-c-ink) 62%, transparent); /* NOTA DE CONTRASTE — medida, no estimada. --cc-brand (#7c3d4a) sobre --cc-bg (#ffffff) → 8.00:1 texto y CTA OK --cc-brand-2 (#9a5563) sobre --cc-bg (#ffffff) → 5.45:1 texto pequeno OK --cc-accent (#8f5a64) sobre --cc-bg (#ffffff) → 5.51:1 texto y CTA OK --cc-accent (#8f5a64) sobre --cc-bg-alt (#faf4f5) → 5.07:1 OK --cc-ink (#352f37) sobre --cc-bg (#ffffff) → 13.02:1 OK --cc-ink-soft (#635e68) sobre --cc-bg (#ffffff) → 6.30:1 OK --cc-ink-soft (#635e68) sobre --cc-bg-alt (#faf4f5) → 5.80:1 OK --cc-ink-inverse sobre --cc-brand → 8.00:1 OK EL ROSA DE ACENTO ES SUPERFICIE, NO TEXTO: --cc-c-rose (#eebec1) con blanco encima → 1.64:1 ILEGIBLE --cc-c-rose (#eebec1) con --cc-brand → 4.87:1 OK, es la combinacion de los botones primarios --cc-c-rose (#eebec1) con --cc-ink → 7.92:1 OK Sobre fondo oscuro (.cc-section--dark, vino o tinta): --cc-c-rose sobre --cc-ink → 7.92:1 OK como texto --cc-c-rose-soft sobre --cc-ink → 6.20:1 OK como texto Regla practica: el rosa lleva encima el vino o la tinta, jamas blanco. */ /* ---------- TIPOGRAFIA ---------- Una sola familia. Jost es una geometrica con caracter suficiente para sostener titulos en peso ligero y cuerpo largo en peso normal, y este portal es sobre todo documentacion tecnica que se lee de corrido: una serif de display habria competido con la lectura. */ --cc-font-display: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --cc-font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --cc-weight-display: 500; --cc-weight-body: 400; --cc-tracking-display: -0.005em; --cc-leading-display: 1.14; --cc-leading-body: 1.72; /* alto: los documentos de este portal son largos */ /* Escala fluida estandar del sistema. Sin desplazar. */ --cc-text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem); --cc-text-sm: clamp(0.875rem, 0.85rem + 0.10vw, 0.9375rem); --cc-text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --cc-text-lg: clamp(1.125rem, 1.08rem + 0.21vw, 1.25rem); --cc-text-xl: clamp(1.25rem, 1.16rem + 0.42vw, 1.5rem); --cc-text-2xl: clamp(1.5rem, 1.315rem + 0.83vw, 2rem); --cc-text-3xl: clamp(1.875rem, 1.644rem + 1.04vw, 2.5rem); --cc-text-4xl: clamp(2.25rem, 1.88rem + 1.67vw, 3.25rem); --cc-text-5xl: clamp(2.75rem, 2.102rem + 2.92vw, 4.5rem); --cc-text-6xl: clamp(3.25rem, 2.231rem + 4.58vw, 6rem); /* ---------- FORMA ---------- Esquina contenida. Este portal muestra documentacion y paneles de datos: el redondeo generoso los volveria blandos y le restaria precision a las tablas, que son la mitad del contenido. Los botones si son pildora. */ --cc-radius-sm: 6px; --cc-radius: 10px; --cc-radius-lg: 16px; --cc-radius-pill: 999px; --cc-border-width: 1px; /* ---------- ELEVACION ---------- Tintadas con el vino de marca, nunca negro puro: sobre blanco el negro ensucia. Dos capas: contacto corto que define el borde, difusion larga que da la altura. */ --cc-shadow-sm: 0 1px 2px -1px color-mix(in srgb, var(--cc-c-brand) 14%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--cc-c-brand) 10%, transparent); --cc-shadow: 0 2px 4px -2px color-mix(in srgb, var(--cc-c-brand) 14%, transparent), 0 12px 28px -6px color-mix(in srgb, var(--cc-c-brand) 16%, transparent); --cc-shadow-lg: 0 4px 8px -4px color-mix(in srgb, var(--cc-c-brand) 16%, transparent), 0 26px 60px -14px color-mix(in srgb, var(--cc-c-brand) 24%, transparent); /* ---------- ESPACIADO ---------- */ /* Esta escala no cambia por marca. Es el ritmo del sistema. */ --cc-space-unit: 8px; --cc-space-1: calc(var(--cc-space-unit) * 0.5); /* 4px */ --cc-space-2: calc(var(--cc-space-unit) * 1); /* 8px */ --cc-space-3: calc(var(--cc-space-unit) * 1.5); /* 12px */ --cc-space-4: calc(var(--cc-space-unit) * 2); /* 16px */ --cc-space-5: calc(var(--cc-space-unit) * 3); /* 24px */ --cc-space-6: calc(var(--cc-space-unit) * 4); /* 32px */ --cc-space-7: calc(var(--cc-space-unit) * 5); /* 40px */ --cc-space-8: calc(var(--cc-space-unit) * 6); /* 48px */ --cc-space-9: calc(var(--cc-space-unit) * 7); /* 56px */ --cc-space-10: calc(var(--cc-space-unit) * 8); /* 64px */ --cc-space-11: calc(var(--cc-space-unit) * 10); /* 80px */ --cc-space-12: calc(var(--cc-space-unit) * 12); /* 96px */ --cc-space-13: calc(var(--cc-space-unit) * 14); /* 112px */ --cc-space-14: calc(var(--cc-space-unit) * 16); /* 128px */ --cc-space-15: calc(var(--cc-space-unit) * 20); /* 160px */ --cc-space-16: calc(var(--cc-space-unit) * 24); /* 192px */ --cc-section-y: clamp(3.5rem, 6vw, 6.5rem); --cc-container: 1120px; /* mas estrecho que el estandar: aqui se lee, no se navega */ --cc-gutter: clamp(1.25rem, 4vw, 2.5rem); /* ---------- MOVIMIENTO ---------- Personalidad MEDIA, segun la tabla del contrato. El portal presenta trabajo terminado a un cliente: el contenido entra con presencia, pero sin espectaculo. */ --cc-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --cc-ease-out: cubic-bezier(0.45, 0.05, 0.2, 1); --cc-dur-fast: 240ms; --cc-dur: 620ms; --cc-dur-slow: 900ms; --cc-reveal-y: 32px; --cc-reveal-stagger: 90ms; /* ---------- EXTENSIONES DE PROYECTO ---------- Anadidas siguiendo el procedimiento del contrato: documentadas primero en docs/TOKENS.md, seccion "Extensiones de este proyecto". */ /* Superficie de acento. El contrato guarda en --cc-accent un color legible como texto, y este rosa no lo es (1.64:1 con blanco). Pero es EL color de los botones primarios y de las bandas destacadas de todo el sistema de documentos. Necesita ranura propia para no corromper --cc-accent. SUPERFICIE: encima va --cc-brand o --cc-ink, nunca blanco. */ --cc-surface-accent: var(--cc-c-rose); --cc-surface-accent-hover: var(--cc-c-rose-mid); /* Superficie de segundo nivel: rellenos de barras de progreso, celdas de total, velos. Mas presente que --cc-bg-alt y mas suave que el acento. */ --cc-surface-2: var(--cc-c-veil); /* Filete de marca: la linea que abre cada seccion del documento de arquitectura y el borde superior de las tarjetas de estado. */ --cc-rule: linear-gradient(90deg, var(--cc-c-brand), var(--cc-c-rose-soft)); /* Filete y borde suaves. El rosa medio aparece decenas de veces en los documentos: los bordes de las pildoras de estado, el borde de los circulos numerados, el relleno de las barras del bono y las lineas divisorias de marca. --cc-line guarda un gris neutro y este rol no es neutro: es de marca. Necesita ranura propia para que ningun bloque consuma el primitivo --cc-c-rose-soft directamente. DECORATIVO: borde y relleno, nunca texto sobre blanco (2.35:1). */ --cc-rule-soft: var(--cc-c-rose-soft); /* Estados del proyecto. El portal muestra en todas partes si una regla esta confirmada por el cliente, propuesta por nosotros o pendiente de definir, y si un pago o un alta esta verificado. Son semanticos, no decorativos: el mismo verde significa "verificado" en la demo y "completada" en el indice de fases. */ --cc-state-ok: #5e7a55; --cc-state-ok-wash: #eef3ec; --cc-state-pending: var(--cc-c-brand-2); --cc-state-pending-wash: var(--cc-c-wash); --cc-state-open: var(--cc-c-rose-soft); /* ---------- BREAKPOINTS ---------- Si cambia uno aqui, cambiarlo tambien en chassis.css. */ --cc-bp-sm: 480px; --cc-bp-md: 768px; --cc-bp-lg: 1024px; --cc-bp-xl: 1440px; } /* ============================================================================= ESCALA TIPOGRAFICA BASE Lo minimo para que el documento herede la marca. Nada decorativo. ============================================================================= */ body { background-color: var(--cc-bg); color: var(--cc-ink); font-family: var(--cc-font-body); font-weight: var(--cc-weight-body); font-size: var(--cc-text-base); line-height: var(--cc-leading-body); } h1, h2, h3, h4 { font-family: var(--cc-font-display); font-weight: var(--cc-weight-display); letter-spacing: var(--cc-tracking-display); line-height: var(--cc-leading-display); color: var(--cc-ink); } /* El H1 va en peso ligero: a tamano de display, Jost 300 tiene la elegancia que el peso 500 pierde. Por debajo de ese tamano el ligero se deshilacha, asi que solo aplica al H1. */ h1 { font-weight: 300; } /* De H3 hacia abajo el titular deja de ser display y pasa a ser rotulo: pesa mas, aprieta menos y respira mas entre lineas. */ h3, h4 { font-weight: 600; letter-spacing: 0; line-height: 1.3; } /* ============================================================================= ALTURA DE CABECERA La cabecera vive en el patron sincronizado "CC Header", no en el tema. Cuando se construya, ajustar este valor a su altura real. ============================================================================= */ :root { --cc-header-h: 4.5rem; --cc-anchor-offset: calc(var(--cc-header-h) + var(--cc-space-5)); }