/* Fireside design tokens — lifted from the interactive deck (deck.template.html) Shared by all mockup directions so they stay on-brand. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400..600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* Ink / dark surfaces */ --ink: #1A1816; --ink-2: #242120; --ink-3: #2D2A26; --ink-4: #151312; --ink-warm: #2A1D16; /* warm shadow for ember gradients */ --ink-warm-2: #1A1210; --card-2: #201D1B; /* darker card-gradient stop (theme-aware) */ --glass: rgba(21,19,18,.72); /* translucent sticky surface (masthead) */ /* Ember accents (Fireside fire) */ --ember: #FF6B35; --flame: #E85D04; --amber: #F7931E; --gold: #FFB627; /* Cream / light */ --cream: #FDF8F3; --cream-2: #E8E4DF; /* Neutrals on dark */ --n-1: #E8E4DF; --n-2: #A8A19B; --n-3: #9C9590; --n-4: #6B6560; --n-5: #4A4540; /* Lines */ --line: rgba(232,228,223,.12); --line-2: rgba(232,228,223,.06); --line-3: rgba(232,228,223,.20); /* Glows */ --glow: 0 8px 32px rgba(255,107,53,.15); --glow-hover: 0 12px 40px rgba(255,107,53,.25); --glow-strong: 0 0 60px rgba(255,107,53,.35); /* This study's brand accent (Dunkin x Barbie hot pink) */ --barbie: #FF00C8; --barbie-soft: #FF6BDF; --glow-pink: 0 8px 32px rgba(255,0,200,.20); /* Type */ --display: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Layout / motion */ --maxw: 1120px; --ease: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.16,1,.3,1); color-scheme: dark; } /* ---------- Light theme — semantic token remap; set data-theme="light" on ---------- */ :root[data-theme="light"] { /* surfaces (page → raised → elevated → recessed) */ --ink: #F4EFE7; --ink-2: #FFFFFF; --ink-3: #FBF6EE; --ink-4: #ECE5DA; --ink-warm: #FBEEE1; --ink-warm-2: #F6E7D8; --card-2: #FFFFFF; --glass: rgba(252,248,243,.82); /* text */ --cream: #221E1A; --cream-2: #3C352F; /* neutrals: strong → faint, dark-on-light */ --n-1: #2A2521; --n-2: #524B44; --n-3: #6F675F; --n-4: #9B938A; --n-5: #CAC1B6; /* hairlines (ink-based) */ --line: rgba(26,24,22,.14); --line-2: rgba(26,24,22,.07); --line-3: rgba(26,24,22,.22); /* glows — softer + warmer on light */ --glow: 0 10px 30px rgba(232,93,4,.13); --glow-hover: 0 14px 40px rgba(232,93,4,.20); --glow-strong: 0 0 50px rgba(255,107,53,.26); --glow-pink: 0 10px 30px rgba(255,0,200,.13); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); background: var(--ink); color: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv01"; transition: background-color .35s var(--ease), color .35s var(--ease); } h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; margin: 0; letter-spacing: -0.01em; } .mono { font-family: var(--mono); } /* eyebrow / kicker label */ .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--n-3); } ::selection { background: var(--ember); color: var(--ink); } /* Subtle film-grain texture usable as an overlay layer */ .grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="light"] .grain::after { mix-blend-mode: multiply; opacity: .02; }