/* ============================================================================ In Your Face — tokens.css · "ATELIER" system The portable token core. Editorial quiet-luxury skincare: warm champagne canvas, GOLD signature accent, ESPRESSO-ink sharp actions, deep PLUM for rich hero moments. Authored in OKLCH. Tut stays the one warm red pop. ============================================================================ */ :root { /* ---- canvas & ink ---- */ --cream: oklch(0.971 0.012 80); /* warm champagne canvas */ --oat: oklch(0.945 0.016 78); /* slightly deeper surround */ --porcelain: oklch(0.994 0.005 80); /* solid surface */ --ink: oklch(0.265 0.026 40); /* warm espresso near-black (text) */ --ink-soft: oklch(0.430 0.022 38); --ink-mute: oklch(0.575 0.016 42); --hairline: oklch(0.30 0.03 40 / 0.12); --line-soft: oklch(0.30 0.03 40 / 0.06); /* ---- gold: the signature accent (hairlines, active, scores, meters) ---- */ --gold: oklch(0.800 0.090 82); --gold-deep: oklch(0.700 0.105 76); --gold-ink: oklch(0.470 0.085 74); /* gold-as-text — darkened to clear AA (~4.6:1) on cream at small sizes */ --gold-soft: oklch(0.800 0.090 82 / 0.16); --gold-line: oklch(0.700 0.105 76 / 0.42); /* ---- plum: deep editorial accent (matured berry), rich moments only ---- */ --plum: oklch(0.380 0.092 352); --plum-deep: oklch(0.300 0.080 350); --plum-soft: oklch(0.380 0.092 352 / 0.10); --blush: oklch(0.880 0.040 18); /* ---- espresso: sharp modern primary action ---- */ --espresso: oklch(0.300 0.028 40); --espresso-2:oklch(0.235 0.026 40); --on-dark: oklch(0.962 0.010 80); /* ---- semantic (calm, warm-tuned) ---- */ --ok: oklch(0.520 0.090 150); --ok-soft: oklch(0.640 0.090 150 / 0.14); --ok-line: oklch(0.52 0.09 150 / 0.3); --warn: oklch(0.620 0.110 60); --warn-soft: oklch(0.700 0.120 62 / 0.16); --warn-line: oklch(0.62 0.11 60 / 0.3); --bad: oklch(0.520 0.150 22); --bad-soft: oklch(0.560 0.160 24 / 0.12); /* ---- scales ---- */ --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 32px; --r-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --app-w: 460px; --app-h: 940px; /* ---- type: Secular One (display) + Heebo (body); both loaded in ---- */ --font-disp: 'Secular One', 'Heebo', system-ui, sans-serif; --font-body: 'Heebo', 'Arial Hebrew', system-ui, sans-serif; --font-display: var(--font-disp); /* legacy alias */ --text-display: 30px; --fw-display: 700; --lh-display: 1.14; --text-title: 24px; --fw-title: 700; --lh-title: 1.18; --text-heading: 20px; --fw-heading: 700; --lh-heading: 1.25; --text-body-lg: 16px; --fw-body-lg: 500; --lh-body-lg: 1.5; --text-body: 15px; --fw-body: 400; --lh-body: 1.55; --text-label: 13px; --fw-label: 600; --lh-label: 1.4; --text-eyebrow: 12px; --fw-eyebrow: 700; --lh-eyebrow: 1.1; --text-micro: 11px; --fw-micro: 700; --lh-micro: 1.2; /* ---- motion ---- */ --motion-fast: 150ms; --motion-base: 240ms; --motion-slow: 320ms; --motion-sheet: 440ms; --ease-out: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.2,.8,.2,1); /* ---- glass + elevation ---- */ --blur: 24px; --surface-fill: linear-gradient(180deg, oklch(1 0 0 / 0.9), oklch(1 0 0 / 0.78)); --surface-hairline: oklch(1 0 0 / 0.7); --glass-bg: linear-gradient(180deg, oklch(1 0 0 / 0.78), oklch(0.99 0.01 80 / 0.66)); --elev-card: 0 1px 2px oklch(0.30 0.02 42 / 0.05), 0 16px 34px -20px oklch(0.35 0.04 42 / 0.28); --elev-float: 0 2px 6px -2px oklch(0.30 0.02 42 / 0.10), 0 22px 48px -22px oklch(0.35 0.04 42 / 0.34); --glass-shadow: inset 0 1px 0 oklch(1 0 0 / 0.8), 0 20px 44px -24px oklch(0.32 0.04 40 / 0.45), 0 4px 12px -8px oklch(0.32 0.04 40 / 0.2); --btn-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14), 0 1px 2px oklch(0.2 0.02 40 / 0.3), 0 10px 22px -12px oklch(0.2 0.02 40 / 0.5); /* ---- legacy aliases (so pre-Atelier files don't reference undefined vars) ---- */ --bg: var(--cream); --surface: var(--porcelain); --on-surface: var(--ink); --on-surface-muted: var(--ink-soft); --on-surface-faint: var(--ink-mute); --primary: var(--espresso); --primary-ink: var(--gold-ink); --on-primary: var(--on-dark); --accent: var(--gold); --grad-primary: linear-gradient(168deg, var(--espresso), var(--espresso-2)); } /* ============================================================================ TYPE CLASSES ============================================================================ */ .t-display { font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: -.015em; } .t-title { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--fw-title); line-height: var(--lh-title); letter-spacing: -.01em; } .t-heading { font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--fw-heading); line-height: var(--lh-heading); } .t-body-lg { font-size: var(--text-body-lg); font-weight: var(--fw-body-lg); line-height: var(--lh-body-lg); } .t-body { font-size: var(--text-body); font-weight: var(--fw-body); line-height: var(--lh-body); } .t-label { font-size: var(--text-label); font-weight: var(--fw-label); line-height: var(--lh-label); } .t-micro { font-size: var(--text-micro); font-weight: var(--fw-micro); line-height: var(--lh-micro); } .eyebrow { font-size: var(--text-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); } .wordmark { font-family: var(--font-display); font-weight: 700; direction: ltr; letter-spacing: .2px; color: var(--ink); } .wordmark .face { color: var(--gold-ink); } .ltr { unicode-bidi: isolate; direction: ltr; } .num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; display: inline-block; }