/* =========================================================================
SoCal Deep Tech Week — Colors & Type
=========================================================================
Tokens for the SDTW brand. Import in any HTML artifact:
Fonts are loaded via Google Fonts (see directives in each HTML).
========================================================================= */
:root {
/* -----------------------------------------------------------------------
COLOR — PRIMITIVES
Taken directly from Figma metadata (top-usage swatches).
----------------------------------------------------------------------- */
--sdtw-charcoal: rgb(41, 41, 43); /* Near-black. Dominant background. */
--sdtw-ink: rgb(0, 0, 0); /* True black. Title-slide backdrop. */
--sdtw-bone: rgb(201, 199, 186);/* Warm off-white. Primary "ink" on dark. */
--sdtw-mist: rgb(194, 205, 211);/* Cool pale blue. Accent/secondary. */
--sdtw-chalk: rgb(233, 234, 226);/* Slightly cooler cream. Card/panel fill. */
--sdtw-parchment: rgb(255, 252, 220);/* Warm pale yellow. Highlight/annotation. */
--sdtw-white: rgb(255, 255, 255);
--sdtw-rust: rgb(157, 31, 21); /* Deep red. Very sparing — alerts/strikes. */
--sdtw-moss: rgb(20, 40, 29); /* Deep green. Sparing — badges/chips. */
--sdtw-smoke: rgb(113, 110, 112);/* Mid grey. Muted UI. */
--sdtw-fog: rgb(217, 217, 217);/* Light grey. Dividers on light. */
/* -----------------------------------------------------------------------
COLOR — SEMANTIC TOKENS
How the primitives map to roles. Design in tokens, not primitives.
----------------------------------------------------------------------- */
/* Backgrounds */
--bg: var(--sdtw-charcoal); /* Canvas. */
--bg-deep: var(--sdtw-ink); /* Cinematic / title backdrop. */
--bg-card: var(--sdtw-bone); /* Cards on dark canvas. */
--bg-panel: var(--sdtw-chalk); /* Panels / info blocks. */
--bg-inverse: var(--sdtw-bone); /* Light surface. */
/* Foregrounds */
--fg: var(--sdtw-bone); /* Default text on dark. */
--fg-1: var(--sdtw-bone); /* Primary. */
--fg-2: rgba(201, 199, 186, 0.72); /* Secondary. */
--fg-3: rgba(201, 199, 186, 0.48); /* Tertiary / captions. */
--fg-on-light: var(--sdtw-charcoal); /* Text on bone/chalk. */
--fg-on-light-2: rgba(41, 41, 43, 0.70);
--fg-on-light-3: rgba(41, 41, 43, 0.50);
/* Accents */
--accent: var(--sdtw-mist); /* Cool highlight on dark. */
--accent-warm: var(--sdtw-parchment); /* Warm highlight. */
--danger: var(--sdtw-rust);
--success: var(--sdtw-moss);
/* Borders & rules */
--rule: var(--sdtw-bone);
--rule-soft: rgba(201, 199, 186, 0.25);
--rule-on-light: rgba(41, 41, 43, 0.15);
/* -----------------------------------------------------------------------
TYPOGRAPHY — FONT FAMILIES
- Display → Oswald (GF, condensed sans, CAPS) [substitute for Klim "Fixture Condensed"]
- Serif → Baskervville (GF)
- Sans/UI → Plus Jakarta Sans (GF)
Oswald is the flagged substitution — request real Fixture Condensed files.
----------------------------------------------------------------------- */
--font-display: 'Oswald', 'Fixture Condensed', 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
--font-serif: 'Baskervville', 'Baskerville', 'Libre Baskerville', 'Times New Roman', serif;
--font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
/* -----------------------------------------------------------------------
TYPOGRAPHY — SCALE
Display sizes pulled from Figma (128 / 96 / 64 / 48 / 36 / 32 / 20 / 12).
Body sizes rounded for screen use.
----------------------------------------------------------------------- */
--fs-display-xl: 128px; /* Title-slide headline */
--fs-display-lg: 96px;
--fs-display-md: 64px;
--fs-display-sm: 48px;
--fs-display-xs: 36px;
--fs-h1: 48px;
--fs-h2: 36px;
--fs-h3: 28px;
--fs-h4: 22px;
--fs-lead: 24px;
--fs-body: 18px;
--fs-small: 14px;
--fs-micro: 12px;
--fs-eyebrow: 12px;
/* Line heights — tight for display, roomy for body */
--lh-display: 1.0;
--lh-heading: 1.12;
--lh-body: 1.5;
--lh-serif: 1.35;
/* Tracking — Oswald wants a little to breathe; caps want more */
--ls-caps: 0.08em;
--ls-caps-tight: 0.04em;
--ls-body: 0.0em;
/* -----------------------------------------------------------------------
SPACING, RADIUS, SHADOW
Flat, sparing system — decks and marketing rarely use shadows.
----------------------------------------------------------------------- */
--space-0: 0;
--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;
--radius-0: 0; /* Default. The brand is sharp. */
--radius-1: 2px;
--radius-2: 4px;
--radius-pill: 999px; /* For capsule tags (used rarely). */
/* Shadows are nearly absent in-brand. Use these only when strictly needed. */
--shadow-1: 0 1px 0 rgba(0,0,0,0.25);
--shadow-2: 0 2px 10px rgba(0,0,0,0.35);
/* -----------------------------------------------------------------------
LAYOUT
----------------------------------------------------------------------- */
--slide-w: 1920px;
--slide-h: 1080px;
--safe-x: 97px; /* Figma shows consistent ~97px horizontal margin on slides. */
--safe-y: 47px;
}
/* =========================================================================
SEMANTIC UTILITY CLASSES
Use these instead of inlining font-family / size.
========================================================================= */
.sdtw-display-xl {
font-family: var(--font-display);
font-size: var(--fs-display-xl);
line-height: var(--lh-display);
letter-spacing: var(--ls-caps-tight);
text-transform: uppercase;
font-weight: 400;
}
.sdtw-display-lg {
font-family: var(--font-display);
font-size: var(--fs-display-lg);
line-height: var(--lh-display);
letter-spacing: var(--ls-caps-tight);
text-transform: uppercase;
font-weight: 400;
}
.sdtw-display-md {
font-family: var(--font-display);
font-size: var(--fs-display-md);
line-height: var(--lh-display);
letter-spacing: var(--ls-caps-tight);
text-transform: uppercase;
font-weight: 400;
}
.sdtw-display-sm {
font-family: var(--font-display);
font-size: var(--fs-display-sm);
line-height: var(--lh-heading);
letter-spacing: var(--ls-caps-tight);
text-transform: uppercase;
font-weight: 400;
}
.sdtw-h1, .sdtw-h2, .sdtw-h3 {
font-family: var(--font-display);
line-height: var(--lh-heading);
letter-spacing: var(--ls-caps-tight);
text-transform: uppercase;
font-weight: 400;
margin: 0;
}
.sdtw-h1 { font-size: var(--fs-h1); }
.sdtw-h2 { font-size: var(--fs-h2); }
.sdtw-h3 { font-size: var(--fs-h3); }
.sdtw-serif {
font-family: var(--font-serif);
font-size: var(--fs-lead);
line-height: var(--lh-serif);
font-style: normal;
}
.sdtw-serif-lead {
font-family: var(--font-serif);
font-size: 32px;
line-height: 1.3;
}
.sdtw-eyebrow {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
font-weight: 400;
color: var(--fg-2);
}
.sdtw-body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
font-weight: 400;
}
.sdtw-caption {
font-family: var(--font-sans);
font-size: var(--fs-small);
line-height: var(--lh-body);
font-weight: 400;
}
.sdtw-meta {
font-family: var(--font-sans);
font-size: 20px;
line-height: 1.2;
font-weight: 400;
}
/* =========================================================================
SIGNATURE PATTERNS
========================================================================= */
/* The "■ Label" metadata bullet. Used for date/location pairs across
every deck, poster, and LinkedIn cover. The square is a literal U+25A0. */
.sdtw-tag::before {
content: "■";
display: inline-block;
margin-right: 0.6em;
font-size: 0.85em;
transform: translateY(-0.08em);
}
/* Thin underline on a numeric callout (used for year "2026"). */
.sdtw-year-box {
display: inline-block;
border: 0.5px solid currentColor;
padding: 0.05em 0.25em 0.02em;
}