/* ========================================================= 2 TIN CANS — Design Tokens Brand: Midnight Ink · Steel signal line · Tin Can square ========================================================= */ :root { /* ---------- CORE PALETTE ---------- From the brief: a single cool-gray/slate ramp anchored by Midnight Ink. No secondary hue — the brand lives in one disciplined temperature. */ --steel: #94A3B8; /* primary — the signal color */ --slate: #64748B; /* accent — wordmark weight */ --muted: #475569; /* secondary — body emphasis */ --charcoal: #334155; /* deep neutral — headings */ --midnight-ink: #0F1729; /* brand ink — backgrounds, marks */ /* ---------- NEUTRALS (extended) ---------- Extrapolated from the slate ramp for surfaces, dividers, and scrims. Stay on the cool side. */ --ink-950: #070B14; --ink-900: #0F1729; /* = midnight-ink */ --ink-800: #1E293B; --ink-700: #334155; /* = charcoal */ --ink-600: #475569; /* = muted */ --ink-500: #64748B; /* = slate */ --ink-400: #94A3B8; /* = steel */ --ink-300: #CBD5E1; --ink-200: #E2E8F0; --ink-100: #F1F5F9; --ink-50: #F8FAFC; --paper: #FFFFFF; /* ---------- SEMANTIC — LIGHT (default) ---------- */ --bg: var(--paper); --bg-subtle: var(--ink-50); --bg-muted: var(--ink-100); --surface: var(--paper); --surface-sunk: var(--ink-50); --fg: var(--midnight-ink); /* primary text */ --fg-1: var(--charcoal); /* secondary text */ --fg-2: var(--muted); /* tertiary text */ --fg-3: var(--slate); /* quaternary / metadata */ --fg-mute: var(--steel); /* disabled / hint */ --line: var(--ink-200); /* hairline border */ --line-strong: var(--ink-300); --brand: var(--midnight-ink); --signal: var(--steel); /* the "string" color */ --accent: var(--slate); /* Status — restrained, desaturated so they don't fight the gray brand. */ --success: #3F7D62; --warning: #B88A3E; --danger: #B4534A; --info: var(--slate); /* ---------- TYPOGRAPHY ---------- System stack, per brief. The logo renders in the host OS's UI font — we honor that. A monospace is provided for code and data; a display stack bumps weight + tracks tighter. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale — modest 1.200 ratio. Precision over drama. */ --fs-12: 0.75rem; /* 12px — caption / micro */ --fs-13: 0.8125rem; /* 13px — label */ --fs-14: 0.875rem; /* 14px — small body */ --fs-16: 1rem; /* 16px — body */ --fs-18: 1.125rem; /* 18px — lead */ --fs-20: 1.25rem; /* 20px — h5 */ --fs-24: 1.5rem; /* 24px — h4 */ --fs-30: 1.875rem; /* 30px — h3 */ --fs-36: 2.25rem; /* 36px — h2 */ --fs-48: 3rem; /* 48px — h1 */ --fs-60: 3.75rem; /* 60px — display */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* for ALL-CAPS labels like the wordmark */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- SPACING (4px base) ---------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* ---------- RADII ---------- The logo's tin-can squares have a ~2px inside radius on a ~60px square: very slight, not pill-y. System radii honor that restraint. */ --radius-0: 0; --radius-1: 2px; /* the tin-can radius */ --radius-2: 4px; --radius-3: 6px; /* default control radius */ --radius-4: 8px; /* cards */ --radius-6: 12px; /* modals */ --radius-pill: 999px; /* ---------- BORDERS ---------- The logo uses a ~3px stroke on the cans at 60px. Roughly 5% of element size — we use 1.5px for the brand feel; 1px for system chrome. */ --border-hair: 1px solid var(--line); --border-line: 1.5px solid var(--line-strong); --border-brand: 1.5px solid var(--midnight-ink); /* ---------- SHADOWS ---------- Cool-tinted, low-spread. Nothing dramatic — the brand prefers crisp lines over soft depth. */ --shadow-sm: 0 1px 2px 0 rgba(15, 23, 41, 0.06); --shadow-md: 0 2px 4px -1px rgba(15, 23, 41, 0.08), 0 1px 2px -1px rgba(15, 23, 41, 0.04); --shadow-lg: 0 8px 24px -6px rgba(15, 23, 41, 0.12), 0 2px 6px -2px rgba(15, 23, 41, 0.06); --shadow-xl: 0 24px 48px -12px rgba(15, 23, 41, 0.18); --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); /* ---------- MOTION ---------- Short, linear-out. No bounce. Signal, not theatre. */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 0.9, 0.4); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* ---------- LAYOUT ---------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --gutter: var(--space-6); } /* ---------- DARK MODE ---------- Midnight Ink becomes the page. Steel rises to carry text. */ @media (prefers-color-scheme: dark) { :root { --bg: var(--midnight-ink); --bg-subtle: var(--ink-800); --bg-muted: #162238; --surface: #152036; --surface-sunk: var(--midnight-ink); --fg: var(--ink-50); --fg-1: var(--ink-200); --fg-2: var(--ink-300); --fg-3: var(--steel); --fg-mute: var(--slate); --line: #223147; --line-strong: #2E4260; --brand: var(--paper); --signal: var(--steel); } } [data-theme="dark"] { --bg: var(--midnight-ink); --bg-subtle: var(--ink-800); --bg-muted: #162238; --surface: #152036; --surface-sunk: var(--midnight-ink); --fg: var(--ink-50); --fg-1: var(--ink-200); --fg-2: var(--ink-300); --fg-3: var(--steel); --fg-mute: var(--slate); --line: #223147; --line-strong: #2E4260; --brand: var(--paper); --signal: var(--steel); } /* ========================================================= SEMANTIC ELEMENTS Use these as bases — components extend them. ========================================================= */ .display { font-family: var(--font-display); font-size: var(--fs-60); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } .h1 { font-family: var(--font-display); font-size: var(--fs-48); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } .h2 { font-size: var(--fs-36); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg); } .h3 { font-size: var(--fs-24); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg); } .h4 { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg); } .lead { font-size: var(--fs-18); font-weight: var(--fw-regular); line-height: var(--lh-loose); color: var(--fg-1); } .p, p { font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-1); } .small { font-size: var(--fs-14); color: var(--fg-2); line-height: var(--lh-normal); } .micro { font-size: var(--fs-12); color: var(--fg-3); line-height: var(--lh-normal); } .eyebrow, .kicker { font-size: var(--fs-12); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); } .wordmark { /* Matches the logo file's style: ALL CAPS, bold, steel-blue, slightly open tracking. */ font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--steel); } code, .code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-muted); padding: 0.12em 0.35em; border-radius: var(--radius-2); color: var(--fg-1); } pre { font-family: var(--font-mono); font-size: var(--fs-13); line-height: var(--lh-normal); background: var(--surface-sunk); color: var(--fg); padding: var(--space-4); border-radius: var(--radius-4); border: var(--border-hair); overflow: auto; }