/* Primary allineato ESATTAMENTE al verde del prodotto. Sorgente: frontend/src/index.css → --color-accent: oklch(0.7 0.15 162), testo su accent → --color-accent-fg: oklch(0.18 0.02 160). Usiamo oklch() diretto (stesso valore dell'app, zero errore di conversione) con fallback hex per browser vecchi. */ /* Material definisce il primary su [data-md-color-primary="teal"] (sul ), quindi va sovrascritto sullo STESSO selettore, non su :root — altrimenti il valore del body vince nell'header. extra.css è caricato dopo il tema → a parità di specificità vince il nostro. */ [data-md-color-primary="teal"] { --md-primary-fg-color: #15ba81; /* fallback */ --md-primary-fg-color: oklch(0.7 0.15 162); /* = app --color-accent */ --md-primary-fg-color--light: oklch(0.78 0.13 162); --md-primary-fg-color--dark: oklch(0.6 0.15 162); --md-accent-fg-color: oklch(0.7 0.15 162); /* Testo/icone sulla barra: scuri come nell'app (--color-accent-fg). */ --md-primary-bg-color: #0a140f; /* fallback */ --md-primary-bg-color: oklch(0.18 0.02 160); --md-primary-bg-color--light: color-mix(in oklab, oklch(0.18 0.02 160) 72%, transparent); } [data-md-color-scheme="slate"] { /* Sfondo scuro un filo più caldo/neutro, coerente col tono "sobrio". */ --md-default-bg-color: hsl(220 14% 11%); } /* Densità ordinata: interlinea del corpo un filo più compatta, tono professionale (vedi PRODUCT.md — "denso, non aria decorativa"). */ .md-typeset { font-size: 0.78rem; line-height: 1.65; } /* Screenshot dell'UI: bordo sottile + angoli morbidi così si staccano dal testo senza dominare. Applicato via {: .ui } sull'immagine. */ .md-typeset img.ui, .md-typeset figure.ui img { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 8px; box-shadow: 0 1px 3px rgb(0 0 0 / 8%); } .md-typeset figure figcaption { font-size: 0.72rem; color: var(--md-default-fg-color--light); margin-top: 0.4rem; } /* Le "chip" di ruolo (chi può fare cosa) usate nelle guide. */ .role { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; line-height: 1.5; border: 1px solid var(--md-default-fg-color--lightest); white-space: nowrap; } .role.admin { color: #b45309; border-color: #b4530955; } .role.author { color: #15ba81; border-color: #15ba8155; } .role.reviewer{ color: #6b7280; border-color: #6b728055; } .role.all { color: #2563eb; border-color: #2563eb55; }