/* Ruhmedy Design System tokens — copied from Claude Design project 93f85443 (tokens/*.css). Do not edit values here; change them in the design system and re-copy. Fonts (Adobe Fonts kit avw7ljn + Archivo Narrow) are linked in index.html . */ /* COLOR */ :root{ --coral-50:#FDF1EB; --coral-100:#FBDCCE; --coral-200:#F8BCA1; --coral-300:#F59C77; --coral-400:#F37F51; --coral-500:#F0602A; --coral-600:#D24E1C; --coral-700:#A83C13; --ink-900:#1C1B19; --ink-800:#242322; --ink-700:#2C2C2D; --ink-600:#44423F; --ink-500:#5B5A58; --ink-400:#767574; --ink-300:#929094; --ink-200:#C9C7C6; --ink-150:#DAD8D7; --ink-100:#E1DFE0; --ink-50:#F4F3F2; --white:#FFFFFF; --sand-500:#A9825F; --sand-400:#C19B7C; --sand-300:#E8DABF; --sand-200:#F1E7D6; --sand-100:#F8F2E8; --blush-200:#DAC7BF; --blush-100:#EFE4DE; --product-green:#2F7D5B; --product-teal:#1E7A8C; --product-saffron:#E0A03C; --product-plum:#7A3B57; --product-sky:#3E86C4; --signal-red:#C83739; --signal-red-dark:#9E2427; --state-success:#3F7A57; --state-warning:#C88A2E; --state-danger:#B3352F; --state-info:#3C6C86; --text-primary:var(--ink-900); --text-secondary:var(--ink-500); --text-muted:var(--ink-300); --text-accent:var(--coral-500); --text-inverse:var(--white); --text-on-coral:var(--white); --surface-page:var(--white); --surface-subtle:var(--ink-50); --surface-studio:var(--ink-100); --surface-ink:var(--ink-900); --surface-coral:var(--coral-500); --surface-coral-soft:var(--coral-50); --surface-kraft:var(--sand-300); --surface-apothecary:var(--sand-100); --surface-warm:var(--blush-100); --surface-botanic:var(--product-green); --surface-marine:var(--product-teal); --border-hairline:var(--ink-200); --border-subtle:var(--ink-150); --border-strong:var(--ink-900); --border-accent:var(--coral-500); --border-inverse:rgba(255,255,255,.28); --focus-ring:var(--coral-500); --overlay-scrim:rgba(28,27,25,.56); --overlay-protect:linear-gradient(180deg,rgba(28,27,25,0) 0%,rgba(28,27,25,.62) 100%); } [data-theme="ink"]{ --text-primary:var(--white); --text-secondary:rgba(255,255,255,.72); --text-muted:rgba(255,255,255,.5); --surface-page:var(--ink-900); --surface-subtle:var(--ink-800); --border-hairline:rgba(255,255,255,.18); --border-strong:var(--white); } /* TYPE */ :root{ --font-brand:"co-headline","Century Gothic",system-ui,sans-serif; --font-text:"co-text","Helvetica Neue",system-ui,sans-serif; --font-perf:"Archivo Narrow","co-text",system-ui,sans-serif; --font-logo:"co-headline","Century Gothic",system-ui,sans-serif; --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace; --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px; --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:60px; --text-6xl:76px; --text-7xl:96px; --leading-tight:1.05; --leading-snug:1.18; --leading-normal:1.35; --leading-relaxed:1.55; --leading-loose:1.7; --tracking-tightest:-0.03em; --tracking-tight:-0.015em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-wider:0.08em; --tracking-widest:0.14em; --type-display:var(--weight-light) var(--text-5xl)/var(--leading-tight) var(--font-brand); --type-h1:var(--weight-light) var(--text-4xl)/var(--leading-snug) var(--font-brand); --type-h2:var(--weight-regular) var(--text-2xl)/var(--leading-snug) var(--font-brand); --type-h3:var(--weight-medium) var(--text-lg)/var(--leading-normal) var(--font-brand); --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-text); --type-body-lg:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-text); --type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-text); --type-legal:var(--weight-regular) var(--text-2xs)/var(--leading-normal) var(--font-text); --type-eyebrow:var(--weight-semibold) var(--text-xs)/1.2 var(--font-text); --type-perf:var(--weight-bold) var(--text-4xl)/0.95 var(--font-perf); --type-apoth:var(--weight-light) var(--text-xl)/var(--leading-normal) var(--font-brand); --measure-prose:66ch; --measure-narrow:44ch; } /* SPACE */ :root{ --space-0:0; --space-px:1px; --space-0-5:2px; --space-1:4px; --space-1-5:6px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px; --space-40:160px; --container-max:1240px; --container-narrow:820px; --gutter:24px; --gutter-lg:40px; --section-y:96px; --section-y-lg:140px; --logo-clearspace:1em; } /* RADII */ :root{ --radius-none:0; --radius-xs:4px; --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px; --radius-circle:50%; } /* ELEVATION */ :root{ --shadow-0:none; --shadow-1:0 1px 2px rgba(28,27,25,.06); --shadow-2:0 4px 12px rgba(28,27,25,.08); --shadow-3:0 12px 32px rgba(28,27,25,.10); --shadow-4:0 24px 56px rgba(28,27,25,.13); --shadow-studio:28px 34px 68px rgba(28,27,25,.16); --ring-hairline:inset 0 0 0 1px var(--border-hairline); --ring-focus:0 0 0 3px var(--coral-100); --blur-glass:saturate(1.1) blur(14px); } /* MOTION */ :root{ --duration-instant:80ms; --duration-fast:140ms; --duration-base:220ms; --duration-slow:340ms; --duration-slower:560ms; --ease-standard:cubic-bezier(.2,.6,.2,1); --ease-out:cubic-bezier(0,0,.2,1); --ease-in:cubic-bezier(.4,0,1,1); --transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); --hover-lift:translateY(-1px); --press-scale:scale(.985); } /* PATTERNS */ :root{ --pattern-dots:radial-gradient(var(--ink-900) 1.4px,transparent 1.5px); --pattern-dots-size:12px 12px; --pattern-dots-coral:radial-gradient(var(--coral-500) 1.4px,transparent 1.5px); --rule-hairline:1px solid var(--border-hairline); --rule-strong:1.5px solid var(--border-strong); --rule-accent:2px solid var(--coral-500); } /* BASE */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font:var(--type-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{margin:0;font-family:var(--font-brand);font-weight:var(--weight-light);color:var(--text-primary)} p{margin:0;text-wrap:pretty} img{max-width:100%;display:block} a{color:var(--coral-600);text-decoration:none;border-bottom:1px solid var(--coral-200);transition:var(--transition-control)} a:hover{color:var(--coral-700);border-bottom-color:var(--coral-500)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} ::selection{background:var(--coral-100);color:var(--ink-900)}