/* ============================================================================= CAPPELLANIE — Design Tokens Guida alle comunità cattoliche etniche della Campania ----------------------------------------------------------------------------- Token semantici e stabili da consegnare allo sviluppo (React / Leaflet). Tono: editoriale e caldo, accenti liturgici misurati. Colore: crema/carta · blu mariano profondo · oro antico · 1 colore per lingua. Tutti i colori in oklch per armonia e gamut ampio. Contrasti AA verificati per testo su carta e per testo bianco/scuro sui tint di lingua. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap'); :root { /* --------------------------------------------------------------------------- 1. CARTA / BASE — crema e inchiostro --------------------------------------------------------------------------- */ --paper: oklch(0.954 0.020 84); /* sfondo app, carta calda */ --paper-sunk: oklch(0.930 0.022 82); /* canali, fondali pannelli */ --paper-raised: oklch(0.978 0.012 86); /* card, superfici sollevate */ --surface: oklch(0.992 0.006 86); /* superficie più alta / input */ --surface-marian: oklch(0.300 0.072 264); /* pannelli scuri (header app) */ --ink: oklch(0.270 0.018 60); /* testo primario (bruno-nero) */ --ink-soft: oklch(0.430 0.020 62); /* testo secondario */ --ink-mute: oklch(0.560 0.018 64); /* metadati, didascalie */ --ink-faint: oklch(0.680 0.014 66); /* placeholder, disabilitato */ --ink-on-dark: oklch(0.962 0.014 84); /* testo su fondi scuri */ --ink-on-dark-soft: oklch(0.820 0.020 84); /* testo sec. su fondi scuri */ /* --------------------------------------------------------------------------- 2. MARIANO & ORO — identità liturgica --------------------------------------------------------------------------- */ --marian: oklch(0.345 0.090 264); /* blu mariano */ --marian-deep: oklch(0.255 0.078 266); /* blu mariano profondo */ --marian-bright: oklch(0.480 0.110 262); /* mariano vivo (link, focus) */ --marian-tint: oklch(0.928 0.028 262); /* fondo tenue mariano */ --marian-line: oklch(0.860 0.032 262); /* hairline mariana */ --gold: oklch(0.745 0.108 79); /* oro antico (accento) */ --gold-deep: oklch(0.640 0.106 74); /* oro profondo (filetti) */ --gold-ink: oklch(0.520 0.092 72); /* oro leggibile su carta (AA) */ --gold-tint: oklch(0.948 0.034 82); /* fondo tenue oro */ --gold-line: oklch(0.820 0.066 80); /* filetto oro */ /* --------------------------------------------------------------------------- 3. CONFINI & TRATTI --------------------------------------------------------------------------- */ --border: oklch(0.872 0.016 78); /* hairline standard */ --border-strong: oklch(0.790 0.018 76); /* bordo marcato */ --border-soft: oklch(0.912 0.012 80); /* divisori tenui */ --rule-gold: var(--gold-line); /* filetto editoriale oro */ /* --------------------------------------------------------------------------- 4. STATI / FEEDBACK --------------------------------------------------------------------------- */ --status-next: oklch(0.560 0.108 152); /* "prossima Messa" (verde) */ --status-next-tint: oklch(0.940 0.036 152); --status-next-ink: oklch(0.420 0.090 150); --status-verify: oklch(0.720 0.130 64); /* "orario da verificare" */ --status-verify-tint: oklch(0.952 0.040 76); --status-verify-ink: oklch(0.500 0.094 60); --status-todefine: oklch(0.640 0.014 66); /* "Da definire" (neutro) */ --status-todefine-tint: oklch(0.928 0.008 70); --status-todefine-ink: oklch(0.470 0.012 66); --banner-review: oklch(0.760 0.090 84); /* "dati in revisione" */ --banner-review-tint: oklch(0.948 0.042 86); --banner-review-ink: oklch(0.460 0.078 70); --focus-ring: oklch(0.560 0.150 262); /* anello di focus visibile */ --selection: oklch(0.880 0.060 82); /* --------------------------------------------------------------------------- 5. MAPPA LINGUA → COLORE (9 comunità, tinte distribuite sulla ruota) Per ogni lingua: core (marker/punto) · tint (fondo chip) · ink (testo AA) --------------------------------------------------------------------------- */ /* Filippina — Vermiglio */ --lang-filippina: oklch(0.585 0.150 30); --lang-filippina-tint: oklch(0.948 0.034 32); --lang-filippina-ink: oklch(0.452 0.118 31); /* Ispanofona — Terracotta */ --lang-ispanofona: oklch(0.605 0.122 52); --lang-ispanofona-tint: oklch(0.950 0.032 56); --lang-ispanofona-ink: oklch(0.470 0.098 50); /* Indiana siro-malabarese — Zafferano */ --lang-siromalabarese: oklch(0.660 0.118 78); --lang-siromalabarese-tint: oklch(0.952 0.040 82); --lang-siromalabarese-ink: oklch(0.480 0.092 70); /* Polacca — Oliva */ --lang-polacca: oklch(0.575 0.094 122); --lang-polacca-tint: oklch(0.944 0.034 124); --lang-polacca-ink: oklch(0.438 0.078 124); /* Cinese — Giada */ --lang-cinese: oklch(0.560 0.094 166); --lang-cinese-tint: oklch(0.944 0.034 168); --lang-cinese-ink: oklch(0.430 0.078 166); /* Cingalese (Sri Lanka) — Petrolio */ --lang-cingalese: oklch(0.560 0.084 202); --lang-cingalese-tint: oklch(0.944 0.032 204); --lang-cingalese-ink: oklch(0.432 0.072 204); /* Ucraina (greco-cattolica) — Cobalto */ --lang-ucraina: oklch(0.550 0.118 252); --lang-ucraina-tint: oklch(0.940 0.034 254); --lang-ucraina-ink: oklch(0.456 0.110 254); /* Anglofona — Prugna */ --lang-anglofona: oklch(0.520 0.118 306); --lang-anglofona-tint: oklch(0.940 0.032 306); --lang-anglofona-ink: oklch(0.452 0.108 306); /* Francofona — Vinaccia */ --lang-francofona: oklch(0.520 0.130 356); --lang-francofona-tint: oklch(0.942 0.034 356); --lang-francofona-ink: oklch(0.452 0.120 356); /* --------------------------------------------------------------------------- 6. TIPOGRAFIA --------------------------------------------------------------------------- */ --font-display: 'Fraunces', 'Spectral', Georgia, 'Times New Roman', serif; --font-body: 'Spectral', Georgia, 'Times New Roman', serif; /* Asse ottico Fraunces per pesi/usi (impostare font-variation-settings) */ --fraunces-soft: 'SOFT' 0; --fraunces-wonk: 'WONK' 0; /* Scala tipografica (modulare ~1.22, base 16) */ --fs-display-2xl: 4.20rem; /* 67px — copertina / hero */ --fs-display-xl: 3.05rem; /* 49px — titolo pagina display */ --fs-display-lg: 2.30rem; /* 37px — titolo sezione */ --fs-h1: 1.85rem; /* 30px — titolo scheda */ --fs-h2: 1.45rem; /* 23px — sottosezione */ --fs-h3: 1.20rem; /* 19px — titolo card */ --fs-body-lg: 1.125rem; /* 18px — testo editoriale */ --fs-body: 1.00rem; /* 16px — testo standard */ --fs-sm: 0.875rem; /* 14px — metadati */ --fs-xs: 0.785rem; /* 12.5px — etichette maiuscoletto */ --lh-tight: 1.08; --lh-snug: 1.28; --lh-normal: 1.52; --lh-relax: 1.66; --tracking-display: -0.014em; --tracking-tight: -0.006em; --tracking-normal: 0; --tracking-label: 0.14em; /* maiuscoletto etichette */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --------------------------------------------------------------------------- 7. SPAZIATURA (base 4) --------------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 2rem; /* 32 */ --space-8: 2.5rem; /* 40 */ --space-9: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ --space-11: 5rem; /* 80 */ /* Target tocco minimo (mobile) */ --tap-min: 44px; /* --------------------------------------------------------------------------- 8. RAGGI --------------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 7px; --radius-md: 11px; /* card */ --radius-lg: 16px; /* pannelli */ --radius-xl: 22px; /* bottom-sheet */ --radius-pill: 999px; /* chip, badge */ /* --------------------------------------------------------------------------- 9. OMBRE (calde, a basso contrasto, stratificate) --------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px oklch(0.270 0.018 60 / 0.06); --shadow-sm: 0 1px 2px oklch(0.270 0.018 60 / 0.05), 0 2px 6px oklch(0.270 0.018 60 / 0.06); --shadow-md: 0 2px 4px oklch(0.270 0.018 60 / 0.05), 0 6px 16px oklch(0.270 0.018 60 / 0.09); --shadow-lg: 0 4px 10px oklch(0.270 0.018 60 / 0.07), 0 18px 38px oklch(0.270 0.018 60 / 0.13); --shadow-sheet: 0 -2px 8px oklch(0.270 0.018 60 / 0.06), 0 -16px 40px oklch(0.270 0.018 60 / 0.16); --shadow-marker: 0 1px 2px oklch(0.270 0.018 60 / 0.25), 0 3px 8px oklch(0.270 0.018 60 / 0.22); --ring-focus: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--focus-ring); /* --------------------------------------------------------------------------- 10. MOVIMENTO --------------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; /* --------------------------------------------------------------------------- 11. ELEVAZIONE / Z --------------------------------------------------------------------------- */ --z-map: 0; --z-sticky: 20; --z-panel: 40; --z-sheet: 60; --z-overlay: 80; --z-toast: 100; /* Layout */ --app-header-h: 68px; --list-w: 380px; --detail-w: 440px; --content-max: 1640px; } /* Maiuscoletto etichetta — utility tipografica ricorrente */ .t-label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute); } ::selection { background: var(--selection); color: var(--ink); }