/* ============================================================
KROMA STUDIO — Design System · colors_and_type.css
DIREZIONE FINALE (unica fonte di verità)
Studio digitale · editoriale · maturo · work-first
------------------------------------------------------------
Base bianco / nero / grigi · ARANCIO KROMA accento principale
Blu inchiostro = secondario tecnico, usato pochissimo.
Gerarchia colore: ~80% neutri · ~15% arancio · ~5% blu/micro.
NESSUN glow, neon, gradiente, spettro, cinema-mode, AI aesthetic.
------------------------------------------------------------
Caricare in PRIMA di questo file:
============================================================ */
:root {
/* ---------- TYPEFACES ---------- */
--font-display: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; /* titoli · numeri · statement */
--font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* testo · UI */
--font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; /* codici progetto · meta · eyebrow */
/* ============================================================
COLORE — NEUTRI (la struttura, ~80%)
============================================================ */
--white: #FFFFFF; /* superficie primaria */
--off: #F4F3F0; /* off-white · sezioni alternate */
--off-2: #ECEAE5; /* aree immagine chiare · campi */
--grey-100: #D8D6D0;
--grey-300: #B4B2AC;
--grey: #6B6B68; /* testo secondario */
--grey-700: #45453F;
--rule: #E2E0DB; /* hairline su chiaro */
--rule-strong:#CFCDC6;
--ink-900: #0E0E0E;
--ink: #141414; /* nero (testo · superficie scura) */
--ink-soft: #1F1F1F; /* superficie scura sollevata */
--rule-dark:#2A2A2A; /* hairline su scuro */
--grey-dark:#A8A8A3; /* testo secondario su scuro */
/* ============================================================
COLORE — ARANCIO KROMA (accento principale, ~15%)
Estratto dal logo ufficiale.
============================================================ */
--kroma: #E4640E; /* arancio brand */
--kroma-deep: #C9550A; /* hover / pressed */
--kroma-tint: #FBEFE6; /* velo arancio per piccoli fondi */
/* ============================================================
COLORE — BLU INCHIOSTRO (secondario tecnico, ~5%, raro)
NON è un secondo colore di brand. Usare con parsimonia.
============================================================ */
--blue: #1C3F6E;
/* ---------- STATI SEMANTICI ---------- */
--success: #2E7D52;
--warning: #B5751A;
--danger: #C23A28;
--info: var(--blue);
/* ============================================================
TOKEN SEMANTICI — superficie CHIARA (default)
============================================================ */
--bg: var(--white);
--bg-alt: var(--off);
--surface: var(--white);
--fg: var(--ink);
--fg-muted: var(--grey);
--fg-subtle: var(--grey-300);
--border: var(--rule);
--border-strong: var(--rule-strong);
--accent: var(--kroma);
--accent-fg: var(--white);
--link: var(--ink);
--focus-ring: var(--kroma);
/* ============================================================
SCALA TIPOGRAFICA (Archivo display · Hanken testo)
forte, leggibile, digitale
============================================================ */
--step-display: clamp(2.6rem, 7.2vw, 6.2rem); /* hero statement */
--step-h1: clamp(2.3rem, 5vw, 3.8rem);
--step-h2: clamp(1.8rem, 3.4vw, 2.6rem);
--step-h3: clamp(1.4rem, 2.2vw, 1.85rem);
--step-h4: 1.3rem;
--step-lead: clamp(1.12rem, 1.5vw, 1.35rem);
--step-body: 1.0625rem;
--step-small: 0.9rem;
--step-eyebrow: 0.72rem;
/* ============================================================
SPACING — base 4px
============================================================ */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
--sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --sp-11:160px;
--section-y: clamp(54px, 8vw, 110px); /* ritmo verticale sezioni */
--gutter: clamp(20px, 4.5vw, 64px); /* margine laterale */
--maxw: 1280px;
/* ============================================================
RADII — minimali, digitali (quasi squadrati)
============================================================ */
--r-xs:2px; --r-sm:3px; --r-md:6px; --r-lg:10px; --r-pill:999px;
/* ============================================================
ELEVATION — quasi assente. I bordi fanno il lavoro.
============================================================ */
--shadow-sm: 0 1px 2px rgba(20,20,20,.04), 0 1px 3px rgba(20,20,20,.05);
--shadow-md: 0 6px 20px rgba(20,20,20,.07), 0 2px 6px rgba(20,20,20,.05);
--shadow-lg: 0 22px 60px rgba(20,20,20,.12), 0 8px 18px rgba(20,20,20,.07);
/* NESSUNA ombra colorata / glow. */
/* ---------- MOTION (sobria) ---------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast:.18s; --dur:.3s; --dur-slow:.55s;
}
/* ============================================================
SUPERFICIE SCURA — [data-theme="dark"]
Banda autorevolezza: metodo, numeri, sezioni forti.
Solida e contemporanea — niente glow / cinema.
============================================================ */
[data-theme="dark"] {
--bg: var(--ink); --bg-alt: var(--ink-soft); --surface: var(--ink-soft);
--fg: var(--off); --fg-muted: var(--grey-dark); --fg-subtle: #6E6E69;
--border: var(--rule-dark); --border-strong: #3A3A3A;
--accent: var(--kroma); --accent-fg: var(--white); --link: var(--off);
color: var(--fg); background: var(--bg);
}
/* ============================================================
BASE TYPOGRAPHY
============================================================ */
body {
font-family: var(--font-body);
font-size: var(--step-body);
line-height: 1.62;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.k-display {
font-family: var(--font-display); font-weight: 800;
font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.04em;
text-wrap: balance;
}
h1, .k-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--step-h1); line-height: 1.0; letter-spacing: -0.035em; text-wrap: balance; }
h2, .k-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--step-h2); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
h3, .k-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--step-h3); line-height: 1.12; letter-spacing: -0.02em; }
h4, .k-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--step-h4); line-height: 1.25; letter-spacing: -0.015em; }
.k-lead { font-size: var(--step-lead); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
p, .k-body { font-size: var(--step-body); line-height: 1.62; text-wrap: pretty; }
.k-small { font-size: var(--step-small); line-height: 1.5; }
/* Statement editoriale — riga forte, parola-chiave in arancio */
.k-statement {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.1; letter-spacing: -0.03em;
text-wrap: balance;
}
.k-accent { color: var(--accent); }
/* Eyebrow / meta / codice progetto — Space Mono */
.k-eyebrow {
font-family: var(--font-mono); font-weight: 700; font-size: var(--step-eyebrow);
letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.k-meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
/* Codice progetto archivio (es. KS—024) — sobrio */
.k-code { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--fg-subtle); }
:where(a,button,input,textarea,select):focus-visible {
outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-xs);
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ============================================================
ALIAS COMPATTI — usati da site.css (sistema home-final)
Mappano i nomi brevi della home-final sui token canonici.
============================================================ */
:root{
--disp: var(--font-display);
--body: var(--font-body);
--mono: var(--font-mono);
--off2: var(--off-2);
--ink2: var(--ink-900);
--grey3: var(--grey-300);
--ruled: var(--rule-dark);
--kroma2: var(--kroma-deep);
--gut: var(--gutter);
--expo: cubic-bezier(.16,1,.3,1);
--soft: var(--ease-out);
}