/* ============================================================================ portal.tokens.css — CAPA DE TOKENS dels portals (Softbase8) ---------------------------------------------------------------------------- Quina variable fer servir per a què: api/v4/GUIA_ESTILS.md (secció 2) i el catàleg api/v4/guia/. Aquest fitxer NOMÉS defineix custom properties. No hi ha d'haver mai cap regla de component aquí: si has d'escriure un selector, va a portal.components.css (o, si és d´un sol portal, a modules/PORTAL/css/). Els noms antics (--color-titols, --color-border…) es remapegen als nous al final del bloc, perquè el CSS que encara els fa servir adopti el sistema sense tocar-lo. Els valors de marca NO són aquí: viuen a modules/PORTAL/css/brand.css. ========================================================================= */ :root { /* ── Superfícies ───────────────────────────────────────────────────── El gris de fons puja de #EDEDED a un to més clar i lleugerament fred: el blanc de les caixes hi destaca sense necessitat d'ombra. */ --surface-page: #F5F7F8; --surface: #FFFFFF; --surface-raised: #FFFFFF; /* el que flota: modal, calaix, dropdown */ --surface-sunken: #EDF1F2; /* barra d'eines, capçalera de taula, peu */ --surface-hover: rgba(16, 25, 28, .04); /* ── Text ──────────────────────────────────────────────────────────── El negre pur (#000) dels títols passa a un negre lleugerament fred. El cos puja de #555 a #38444C: més contrast i el mateix biaix de to. */ --text: #14191C; --text-2: #38444C; --text-muted: #5C6B75; --text-inverse: #FFFFFF; /* ── Vores ─────────────────────────────────────────────────────────── La vora antiga portava alfa (#D9E1E7CC) i canviava segons el que hi havia a sota. Aquestes són opaques i previsibles. */ --border: #D8DFE3; --border-soft: #E7ECEE; /* separador de fila dins d'una taula */ --border-strong: #B9C4CB; --overlay: rgba(16, 22, 26, .45); /* ── Estats semàntics ──────────────────────────────────────────────── INDEPENDENTS de la marca: un «pagat» és verd als tres portals. Els *-ink compleixen AA sobre el seu *-tint. */ --ok: #15A979; --ok-ink: #0B6A4E; --ok-tint: #E4F3EC; --warn: #CA8A04; --warn-ink: #8A5A00; --warn-tint: #FBF1DC; --bad: #E03131; --bad-ink: #A02128; --bad-tint: #FBEAEB; /* ── Espai · múltiples de 4 ────────────────────────────────────────── Avui hi ha 30 combinacions de padding, amb valors trencats com 11,9271px i 7,2px 13,6px (herència d'em). Aquesta és la sèrie. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── Tipografia · 6 mides, 3 pesos ─────────────────────────────────── Avui: 16 mides i 6 pesos en una sola pantalla. */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --lh-tight: 1.2; --lh-normal: 1.5; /* ── Radi · 3 valors ───────────────────────────────────────────────── Avui n'hi ha 22. --r-full és per al que ha de ser pastilla de debò (badges, xips, toggles), no per a caixes i botons. */ --r-sm: 4px; --r-md: 8px; --r-full: 999px; /* ── Elevació · 2 ombres ───────────────────────────────────────────── Avui n'hi ha 4 + vora a gairebé totes les caixes. El relleu es reserva per al que FLOTA; la resta se separa amb espai i filet. */ --sh-raised: 0 1px 2px rgba(16, 22, 26, .06); --sh-overlay: 0 12px 32px -12px rgba(16, 22, 26, .32); /* ── Controls ────────────────────────────────────────────────────────── */ --control-h: 32px; --control-h-sm: 26px; --tap-min: 44px; /* ── Moviment ────────────────────────────────────────────────────────── */ --dur: 150ms; --ease: cubic-bezier(.2, 0, .2, 1); /* ═══════════════════════════════════════════════════════════════════ REMAPEIG DELS TOKENS ANTICS A partir d'aquí no hi ha valors nous: només es re-apunten els noms que ja fa servir el CSS existent cap al contracte de dalt. Quan la fase 5 esborri els fulls vells, aquest bloc desapareix. ═══════════════════════════════════════════════════════════════════ */ /* Superfícies i text */ --color-fons: var(--surface-page); --color-fons-caixa: var(--surface); --color-titols: var(--text); --color-textos: var(--text-2); --color-terciari: var(--text-muted); --color-complementari-titol: var(--text-muted); --color-extra: var(--text); --color-interior-camps: var(--surface-sunken); --color-fons-caixes-desglos: var(--surface-sunken); --color-fons-caixes-desglos-v2: var(--surface-sunken); --color-text: var(--text-2); /* Les del PortalTeam (estils_pt.css): sense el full antic quedaven sense valor */ --color-secundari-clar: var(--brand-tint); --color-kpi-etiqueta: var(--text-2); --color-kpi-peu: var(--text-muted); /* Vores i hover */ --color-border: var(--border); --color-border-sutil: var(--border-strong); --color-hover-sutil: var(--surface-hover); /* Paleta d'estats → semàntics. Compte amb --color-text-success: malgrat el nom NO és color de text, és el verd d'accent (vora). Es manté en aquest rol. */ --color-success-bg: var(--ok-tint); --color-success-border: var(--ok); --color-success-text: var(--ok-ink); --color-success-solid: var(--ok); --color-text-success: var(--ok); --color-fons-success: var(--ok-tint); --color-danger-bg: var(--bad-tint); --color-danger-border: var(--bad); --color-danger-text: var(--bad-ink); --color-danger-solid: var(--bad); --color-personal-danger:var(--bad); --color-warning-bg: var(--warn-tint); --color-warning-border: var(--warn); --color-warning-text: var(--warn-ink); --color-warning-solid: var(--warn); --color-personal-warning: var(--warn); /* Tokens «subtle» de Bootstrap: hereten sols */ --bs-success-bg-subtle: var(--ok-tint); --bs-success-border-subtle: var(--ok); --bs-success-text-emphasis: var(--ok-ink); --bs-danger-bg-subtle: var(--bad-tint); --bs-danger-border-subtle: var(--bad); --bs-danger-text-emphasis: var(--bad-ink); --bs-warning-bg-subtle: var(--warn-tint); --bs-warning-border-subtle: var(--warn); --bs-warning-text-emphasis: var(--warn-ink); /* El placeholder dels camps (i el text secundari de Bootstrap): amb el gris del tema, també en fosc */ --bs-secondary-color: var(--text-muted); /* Icones de la barra del CKEditor (sprites foscos): en fosc s'inverteixen */ --editor-ico-filter: none; /* Mides mínimes que ja existien: s'alineen amb l'escala nova */ --mida-text-min: var(--fs-xs); --mida-text-taula: var(--fs-sm); --mida-min-clic: var(--control-h); } /* ── Tema fosc ─────────────────────────────────────────────────────────── Deliberadament NOMÉS darrere de [data-theme="dark"], no del prefers-color-scheme: els components encara porten colors literals i activar-lo per a tothom ara mateix trencaria pantalles. Per provar-lo: document.documentElement.dataset.theme = 'dark' És la prova que amb la capa de tokens el fosc costa ~30 línies. */ :root[data-theme="dark"] { --surface-page: #0E1215; --surface: #161C20; --surface-raised: #1C2428; --surface-sunken: #1E262B; --surface-hover: rgba(255, 255, 255, .05); --text: #E9EEF0; --text-2: #C0CBD1; --text-muted: #93A2AB; --border: #29333A; --border-soft: #202A30; --border-strong: #3A4750; --ok-tint: #12302A; --ok-ink: #6FD9B4; --warn-tint: #33280F; --warn-ink: #E5BC6A; --bad-tint: #35191B; --bad-ink: #F09B9B; --sh-raised: 0 1px 2px rgba(0, 0, 0, .5); --sh-overlay: 0 12px 32px -12px rgba(0, 0, 0, .7); --editor-ico-filter: invert(1); } /* ── Pell de la versió mixta ───────────────────────────────────────────── Triada l'1/10/2026: el menú i les cantonades de la B i, a dins del full, la C (files alternes, botons i tipografia). */ :root { --c-ground: #EEEDF2; /* el terra de la B */ --c-zebra: #F5F6F8; /* fila alterna: separa sense tornar als filets */ /* El menú, una targeta com el full: clar amb el tema clar i fosc amb el fosc */ --c-nav: var(--surface); --c-nav-tx: var(--text-2); --c-nav-hover: var(--surface-hover); --c-nav-line: var(--border-soft); --c-nav-act-bg: var(--brand-tint); --c-nav-act-tx: var(--brand-ink); /* Cantonades petites, les de la B */ --c-ctl: 8px; /* botons, camps, pestanyes, xips de filtre */ --c-ico: 8px; /* botons de només icona (cistella, enrere, l´ull de la fila) */ --c-sm: 6px; /* files petites: línies, opcions dels desplegables */ --c-pop: 10px; /* desplegables i menús emergents */ --c-img: 8px; /* miniatures */ --c-sheet: 14px; /* el full blanc */ --c-r: 14px; /* superfícies grans dins del full */ --c-tile: 12px; /* rajoles i blocs tenyits */ --c-row-r: 8px; /* fila alterna */ --c-ctl-h: 40px; /* botons i camps: tots a la mateixa alçada perquè una fila no faci esglaons */ --c-ctl-h-sm: 32px; /* .btn-sm: dins de files i blocs */ --c-ctl-h-lg: 48px; /* .btn-lg: només la compra (fitxa de producte, «Tramitar») */ --c-band: linear-gradient(135deg, var(--brand-tint) 0%, var(--surface-sunken) 62%); --c-prod-max: 1200px; /* fitxa de producte */ } :root[data-theme="dark"] { --c-ground: #0B090E; --c-zebra: rgba(255, 255, 255, .035); --c-nav: #17141C; /* més fosc que el full: se separen */ --c-nav-tx: #9E97AB; --c-nav-hover: #241F2C; --c-nav-line: rgba(255, 255, 255, .08); /* En fosc l´actiu sí que és ple: allà el color és accent i no crit */ --c-nav-act-bg: var(--brand); --c-nav-act-tx: var(--brand-contrast); } :root { --c-hero-vel: linear-gradient(90deg, rgba(10, 14, 16, .86) 0%, rgba(10, 14, 16, .55) 55%, rgba(10, 14, 16, .22) 100%); } /* el vel de la foto de portada */