/* =============================================================================
Sofiia Karman — Design Tokens & Foundations
Single source of truth. Locked decisions (see Sofiia-Karman-Design-System.md).
Order: 1) fonts 2) :root tokens 3) base reset 4) layout (container/grid)
5) type utilities (.t-*) 6) canonical components (pill / btn / card)
Rule for implementers: NEVER hardcode a hex/px/shadow — always use a token.
============================================================================= */
/* 1) FONTS — Google Fonts (OFL, free). Prefer a in for perf:
*/
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Inter:wght@400;500;700&family=Caveat:wght@700&family=Fraunces:ital,opsz,wght@1,9..144,300&display=swap');
/* 2) TOKENS ----------------------------------------------------------------- */
:root {
/* — Font families — */
--font-display: 'Rubik Mono One', 'Arial Black', sans-serif; /* hero, sections, card titles */
--font-sans: 'Inter', 'Arimo', Arial, system-ui, sans-serif; /* body, UI, labels, stat numbers */
--font-script: 'Caveat', cursive; /* decorative openers only: case / posts / let's create… */
--font-serif: 'Fraunces', serif; /* italic numerals 01–04 only (optional) */
/* — Type scale (font sizes) — fluid where it scales with viewport — */
--fs-hero: clamp(56px, 11vw, 128px);
--fs-display: clamp(40px, 6vw, 72px);
--fs-title-l: clamp(32px, 4vw, 44px);
--fs-title-m: clamp(26px, 3vw, 32px);
--fs-card-title: clamp(20px, 2.4vw, 24px);
--fs-stat: clamp(32px, 4vw, 44px);
--fs-lead: clamp(18px, 1.6vw, 20px);
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-label: 13px;
--fs-caption: 12px;
--fs-script: clamp(40px, 9vw, 112px);
--fs-numeral: clamp(40px, 5vw, 56px);
/* — Colors (8 semantic roles, locked) — */
--color-bg: #FFFCF5; /* page background (warm cream) */
--color-bg-alt: #F4F0E5; /* alternating section (sand) */
--color-surface: #FFFFFF; /* light card */
--color-surface-dark: #2E2E2E; /* dark / elevated card */
--color-ink: #15140F; /* THE near-black: text + black sections */
--color-text: var(--color-ink);
--color-text-muted: #555555; /* secondary text, card numbers */
--color-text-inverse: #FAF7F0; /* text on dark */
--color-accent: #B7E3B0; /* mint green (brand) */
--color-accent-strong: #9FD697; /* hover / active */
--color-accent-soft: #E7F4E2; /* tint background */
--color-on-accent: var(--color-ink); /* text on green = dark (never white) */
--color-border: #E3DDD0; /* hairline on light */
--color-border-strong: var(--color-ink);
--color-border-inverse: #3A3A36; /* on dark */
/* — Spacing (4 / 8pt) — */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 128px;
--space-section: clamp(48px, 8vw, 128px); /* vertical rhythm between sections */
/* — Radius — */
--radius-sm: 8px;
--radius-md: 16px; /* cards */
--radius-lg: 24px;
--radius-pill: 999px;
/* — Border — */
--border-width: 1.5px;
/* — Shadows (LOCKED: hard offset, no border on cards) — */
--shadow-card: 6px 6px 0 0 var(--color-ink); /* light + accent cards */
--shadow-card-sm: 4px 4px 0 0 var(--color-ink); /* small/compact cards */
--shadow-card-accent: 6px 6px 0 0 var(--color-accent);/* inverse (dark) card on cream */
--shadow-soft: 0 6px 24px rgba(21,20,15,.10); /* fallback, currently unused */
/* — Layout / grid — */
--container-max: 1200px;
--container-wide: 1360px;
--gutter: 24px; /* = --space-5 */
--margin-inline: clamp(16px, 5vw, 80px); /* symmetric page margins */
--grid-cols: 12;
/* — Breakpoints (reference; CSS vars can't be used in @media) —
mobile <640 · sm ≥640 · md ≥768 · lg ≥1024 · xl ≥1280 */
}
/* 3) BASE RESET ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding-left: 1.1em; }
/* 4) LAYOUT ----------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--margin-inline);
}
.section { padding-block: var(--space-section); }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-ink); color: var(--color-text-inverse); }
/* Card grid — align-items:stretch makes all cards EQUAL height automatically
(this is the fix for the 159.4 / 162.7 / 160.8 drift in the source). */
.grid {
display: grid;
gap: var(--gutter);
align-items: stretch;
grid-template-columns: 1fr; /* mobile default */
}
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* 5) TYPE UTILITIES — apply a class, never re-type size/weight/family --------- */
.t-hero { font-family: var(--font-display); font-size: var(--fs-hero); line-height: .95; font-weight: 400; }
.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.0; font-weight: 400; }
.t-title-l { font-family: var(--font-display); font-size: var(--fs-title-l); line-height: 1.05; font-weight: 400; }
.t-title-m { font-family: var(--font-display); font-size: var(--fs-title-m); line-height: 1.1; font-weight: 400; }
.t-card-title { font-family: var(--font-display); font-size: var(--fs-card-title); line-height: 1.15; font-weight: 400; }
.t-stat { font-family: var(--font-sans); font-size: var(--fs-stat); line-height: 1.0; font-weight: 700; }
.t-lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: 1.5; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; font-weight: 400; }
.t-body-sm { font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: 1.55; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: var(--fs-label); line-height: 1.2; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em; }
.t-caption { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: 1.4; font-weight: 400; }
.t-script { font-family: var(--font-script); font-size: var(--fs-script); line-height: 1.0; font-weight: 400; }
.t-numeral { font-family: var(--font-serif); font-size: var(--fs-numeral); line-height: 1.0; font-weight: 300;
font-style: italic; color: var(--color-text-muted); }
/* 6) CANONICAL COMPONENTS --------------------------------------------------- */
/* Pill / label chip — for "what I do", "me", section eyebrows, name tags */
.pill {
display: inline-flex; align-items: center;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
background: var(--color-accent); color: var(--color-on-accent);
font-family: var(--font-sans); font-size: var(--fs-label);
font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
white-space: nowrap;
}
.pill--ink { background: var(--color-ink); color: var(--color-text-inverse); }
/* Button — contact pills ("instagram" / "telegram"). Hard-offset press effect. */
.btn {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border: none; border-radius: var(--radius-pill);
background: var(--color-accent); color: var(--color-on-accent);
font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: 700;
text-decoration: none; cursor: pointer;
box-shadow: var(--shadow-card-sm);
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--color-accent-strong); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--color-ink); } /* presses into shadow */
.btn--ink { background: var(--color-ink); color: var(--color-text-inverse); box-shadow: var(--shadow-card-sm); }
/* Canonical CARD — one structure, three color variants. No border; hard offset shadow.
Equal heights come from the parent .grid (align-items:stretch). */
.card {
display: flex; flex-direction: column;
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--color-surface); color: var(--color-ink);
box-shadow: var(--shadow-card);
}
.card--accent { background: var(--color-accent); color: var(--color-ink); box-shadow: var(--shadow-card); }
.card--inverse { background: var(--color-ink); color: var(--color-text-inverse); box-shadow: var(--shadow-card-accent); }
.card--compact { padding: var(--space-5); box-shadow: var(--shadow-card-sm); }
/* Card parts (optional helpers) */
.card__num { align-self: flex-end; } /* use with .t-numeral; sits top-right via order/flex in markup */
.card__title { margin-bottom: var(--space-3); } /* use with .t-card-title */
.card__body { } /* use with .t-body / .t-body-sm */