/* ============================================================
Prosoft AI Studio — Design Tokens
Editorial fashion meets premium SaaS.
============================================================ */
/* ---------- Fonts (via Google Fonts) ----------
Add to :
-------------------------------------------------- */
:root {
/* --- Typefaces --- */
--font-display: "Fraunces", "PP Editorial New", Georgia, serif;
--font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
/* --- Type scale (1440 design) --- */
--fs-hero: clamp(72px, 12vw, 180px); /* editorial display */
--fs-display: clamp(56px, 8vw, 120px);
--fs-h1: clamp(40px, 5vw, 72px);
--fs-h2: clamp(28px, 3.2vw, 44px);
--fs-h3: clamp(20px, 2vw, 28px);
--fs-body: 17px;
--fs-small: 14px;
--fs-mono: 12px; /* monospace labels, tracked wide */
/* --- Letterspacing --- */
--tr-display: -0.035em; /* tight display */
--tr-display-en: -0.018em;/* loosened a hair for English */
--tr-body: -0.005em;
--tr-mono: 0.12em; /* TRACKED OUT mono labels */
/* --- Line-height --- */
--lh-display: 0.94;
--lh-heading: 1.06;
--lh-body: 1.55;
--lh-mono: 1.2;
/* --- Core palette --- */
--ink: #0E0E10; /* near-black, matte */
--ink-soft: #18171A; /* dark-mode alt panel */
--paper: #F4EFE6; /* warm cream */
--bone: #E8E1D3; /* cream mat */
--signature: oklch(0.68 0.22 25); /* terracotta / fashion-cat red */
--signature-dim: oklch(0.55 0.20 25);
--accent: oklch(0.72 0.19 75); /* warm amber/gold */
--lime: oklch(0.85 0.18 130); /* chartreuse — micro only */
/* --- Default theme = LIGHT --- */
--bg: var(--paper);
--bg-alt: var(--bone);
--bg-invert: var(--ink);
--fg: var(--ink);
--fg-soft: rgba(14,14,16,0.65);
--fg-faint: rgba(14,14,16,0.42);
--fg-invert: var(--bone);
--hairline: rgba(14,14,16,0.12);
--hairline-strong: rgba(14,14,16,0.32);
/* --- Spacing scale (8pt base, editorial generous) --- */
--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(120px, 18vh, 200px); /* vertical breath between sections */
/* --- Grid --- */
--grid-max: 1440px;
--grid-gutter: 80px;
--grid-gutter-md: 32px;
/* --- Radius — editorial sharp --- */
--radius-0: 0;
--radius-pill: 999px;
/* --- Shadows — extremely restrained --- */
--shadow-0: none;
--shadow-soft: 0 30px 60px -20px rgba(14,14,16,0.15);
/* --- Motion --- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 180ms;
--dur-base: 300ms;
--dur-slow: 600ms;
}
:root[data-theme="light"] {
--bg: var(--paper);
--bg-alt: var(--bone);
--bg-invert: var(--ink);
--fg: var(--ink);
--fg-soft: rgba(14,14,16,0.65);
--fg-faint: rgba(14,14,16,0.42);
--fg-invert: var(--bone);
--hairline: rgba(14,14,16,0.12);
--hairline-strong: rgba(14,14,16,0.32);
--signature: oklch(0.68 0.22 25);
--accent: oklch(0.72 0.19 75);
}
:root[data-theme="dark"] {
--bg: var(--ink);
--bg-alt: var(--ink-soft);
--bg-invert: var(--paper);
--fg: var(--bone);
--fg-soft: rgba(232,225,211,0.65);
--fg-faint: rgba(232,225,211,0.42);
--fg-invert: var(--ink);
--hairline: rgba(232,225,211,0.14);
--hairline-strong: rgba(232,225,211,0.34);
--signature: oklch(0.72 0.22 25); /* slightly brighter for dark */
--accent: oklch(0.78 0.19 75);
}
/* ============================================================
Semantic typography
============================================================ */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); }
.t-hero,
h1.editorial {
font-family: var(--font-display);
font-size: var(--fs-hero);
line-height: var(--lh-display);
letter-spacing: var(--tr-display);
font-weight: 380;
font-variation-settings: "opsz" 144, "SOFT" 30;
}
.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 400; }
.t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-display); font-weight: 400; }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -0.02em; font-weight: 400; }
.t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; }
.t-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.45; }
.t-mono,
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--tr-mono);
text-transform: uppercase;
line-height: var(--lh-mono);
color: var(--fg-soft);
}
em, .italic, .ed-italic {
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
/* Signature-underlined word (for editorial emphasis inline) */
.u-signature {
background-image: linear-gradient(to top, var(--signature) 0, var(--signature) 0.08em, transparent 0.08em);
background-repeat: no-repeat;
background-position: 0 92%;
background-size: 100% 100%;
padding-bottom: 0.02em;
}
/* ============================================================
Atoms
============================================================ */
.hairline { border-top: 1px solid var(--hairline); }
.hairline-v { border-left: 1px solid var(--hairline); }
.btn {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
padding: 14px 28px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-primary { background: var(--signature); color: var(--paper); }
.btn-primary:hover { transform: scale(1.02); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--hairline-strong); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); }
.btn-text { background: transparent; color: var(--fg); padding: 14px 4px; border-radius: 0; }
.btn-text:hover { color: var(--signature); }
.pill {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
padding: 6px 12px;
border: 1px solid var(--hairline-strong);
border-radius: var(--radius-pill);
color: var(--fg-soft);
display: inline-flex;
align-items: center;
gap: 8px;
}
.pill-signature { background: var(--signature); color: var(--paper); border-color: var(--signature); }
.pill-lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
/* Editorial link — bottom signature line, thickens on hover */
.link {
color: inherit;
text-decoration: none;
background-image: linear-gradient(var(--signature), var(--signature));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 1px;
transition: background-size var(--dur-fast) var(--ease-out);
padding-bottom: 2px;
}
.link:hover { background-size: 100% 3px; }
/* Diagonal hairline placeholder — used for image stand-ins */
.placeholder {
position: relative;
background-color: var(--bg-alt);
background-image: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 14px,
var(--hairline) 14px,
var(--hairline) 15px
);
border: 1px solid var(--hairline-strong);
color: var(--fg-soft);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--tr-mono);
text-transform: uppercase;
}
.placeholder .ph-label {
position: absolute;
top: 16px;
left: 16px;
padding: 4px 8px;
background: var(--bg);
border: 1px solid var(--hairline-strong);
color: var(--fg);
}
/* Module number — "01 / 13" */
.module-number {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--fg-soft);
}
.module-number .num-active { color: var(--fg); }
/* ============================================================
Section tone helper (light section can flip to dark and vice versa)
============================================================ */
.tone-invert {
background: var(--bg-invert);
color: var(--fg-invert);
}
.tone-invert .placeholder {
background-color: transparent;
background-image: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 14px,
rgba(232,225,211,0.14) 14px,
rgba(232,225,211,0.14) 15px
);
border-color: rgba(232,225,211,0.34);
color: rgba(232,225,211,0.65);
}
.tone-invert .hairline { border-top-color: rgba(232,225,211,0.14); }
/* ============================================================
Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}