/* TradingBrief web CSS — flat build for tradingbrief.app, 2026-08-27. Generated by concatenating docs/design/system/tokens/*.css in the order docs/design/system/styles.css imports them, so the page never pays for the 9-file @import waterfall styles.css itself would trigger if linked directly. The Google Fonts @import inside tokens/fonts.css is stripped here — fonts are loaded via + in instead, the same pattern both website-* .dc.html templates use. Do not hand-edit token values here — edit the source token file and rebuild. */ /* ── tokens/fonts.css ── */ /* Webfonts. NOTE — no font binaries were supplied with the brief (there is no prior identity). These are Google Fonts substitutions chosen for the brand; see readme.md > Typography. Newsreader — editorial serif, optical sizing, carries judgement text IBM Plex Sans — UI face; wide German-diacritic coverage, holds up at 11-13px IBM Plex Mono — tabular figures for prices and levels If real licensed binaries arrive, drop them into assets/fonts/ and replace this remote @import with local @font-face rules. */ :root{ --font-display:"Newsreader",Georgia,"Times New Roman",serif; --font-ui:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif; --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace; } /* ── tokens/colors.css ── */ /* Base palette. Warm paper ground, warm ink. Nothing pure-grey, nothing pure-black. Stance colours are never used alone — always paired with the stance word. */ :root{ /* Paper — the ground the product is printed on */ --paper-000:#FFFFFF; --paper-050:#FDFBF7; --paper-100:#F7F3EC; --paper-200:#EFE9DF; --paper-300:#E2DACD; --paper-400:#D3C9B7; /* Ink — text and hairlines */ --ink-900:#16130E; --ink-800:#26221A; --ink-700:#3A352C; --ink-500:#6B6455; --ink-400:#8C8474; --ink-300:#B4AC9B; /* Brand — ink blue. Interactive, editorial furniture, premium surfaces. */ --blue-900:#12293F; --blue-700:#1B3B5F; --blue-600:#24507E; --blue-400:#5C82AC; --blue-100:#E3EAF2; --blue-050:#F1F5F9; /* Stance — bullish */ --bull-700:#0E5233; --bull-600:#14683F; --bull-300:#8FBFA5; --bull-100:#E2EFE7; /* Stance — bearish */ --bear-700:#832619; --bear-600:#A33224; --bear-300:#D79E93; --bear-100:#F7E6E2; /* Stance — mixed / caution / watch */ --amber-700:#71510B; --amber-600:#8A6410; --amber-300:#D9BE7C; --amber-100:#F6ECD8; /* Stance — neutral (reuses ink+paper deliberately) */ --neutral-600:#6B6455; --neutral-100:#EFE9DF; } /* ── tokens/typography.css ── */ /* Type scale. Two families do the work: Newsreader states, Plex Sans labels. Prices are always mono + tabular so digits do not jump as they tick. */ :root{ --text-display-lg:2.375rem; /* 38px — briefing headline, paywall promise */ --text-display:1.875rem; /* 30px — screen title, big price */ --text-title:1.375rem; /* 22px — section title, market name */ --text-lead:1.125rem; /* 18px — key insight, the long "why" */ --text-body:1rem; /* 16px — reasons, scenarios, prose */ --text-body-sm:0.9375rem; /* 15px — level labels, driver detail */ --text-label:0.8125rem; /* 13px — UI labels, buttons, list meta */ --text-micro:0.6875rem; /* 11px — eyebrows, timestamps, disclaimer */ --leading-tight:1.08; --leading-snug:1.22; --leading-normal:1.42; --leading-relaxed:1.58; /* German prose blocks */ --tracking-tight:-0.015em; --tracking-normal:0; --tracking-wide:0.02em; --tracking-eyebrow:0.09em; /* uppercase eyebrows only */ --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; } /* ── tokens/spacing.css ── */ /* 2px-based, non-linear. Phone screens need 16px gutters and 12px card padding; the big jumps exist so sections read as sections. */ :root{ --space-0:0px; --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px; --space-11:56px; --space-12:72px; --gutter-phone:16px; /* screen edge padding, iPhone */ --gutter-web:32px; --measure-prose:66ch; /* max line length for German prose */ --tap-min:44px; /* never smaller */ } /* ── tokens/radius.css ── */ :root{ --radius-none:0px; --radius-xs:4px; --radius-sm:6px; --radius-md:10px; /* default card */ --radius-lg:14px; /* grouped / hero card */ --radius-xl:20px; /* sheets, widget */ --radius-pill:999px; /* stance chips, tags */ } /* ── tokens/elevation.css ── */ /* This is a hairline system, not a shadow system. Cards separate with a 1px rule on paper. Shadows appear only where something genuinely floats above content. */ :root{ --hairline:1px solid var(--paper-300); --hairline-strong:1px solid var(--paper-400); --hairline-ink:1px solid var(--ink-900); --shadow-none:none; --shadow-raise:0 1px 2px rgba(22,19,14,.05); /* pressed-into-paper cards */ --shadow-float:0 6px 20px -6px rgba(22,19,14,.16); /* sticky bar, popover */ --shadow-sheet:0 -8px 32px -8px rgba(22,19,14,.20); /* bottom sheet, paywall */ /* Protection gradients — used instead of scrims so paper stays paper */ --fade-paper-down:linear-gradient(to bottom,rgba(253,251,247,0) 0%,rgba(253,251,247,.92) 55%,var(--paper-050) 100%); --fade-paper-up:linear-gradient(to top,rgba(253,251,247,0) 0%,var(--paper-050) 100%); } /* ── tokens/motion.css ── */ /* Restrained. Fades and short travel; no bounce, no spring overshoot. This is read at 7am — motion must never ask for attention. */ :root{ --dur-instant:90ms; /* @kind other */ --dur-fast:140ms; /* @kind other */ --dur-base:200ms; /* @kind other */ --dur-slow:300ms; /* @kind other */ --dur-sheet:340ms; /* @kind other */ --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */ --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */ --ease-sheet:cubic-bezier(.32,.72,0,1); /* @kind other */ --press-scale:0.985; /* @kind other */ /* buttons and rows shrink slightly, never bounce */ --hover-tint:rgba(22,19,14,.04); --press-tint:rgba(22,19,14,.08); } /* ── tokens/semantic.css ── */ /* Semantic aliases — components reference these, not the base palette. */ :root{ /* Surfaces */ --surface-app:var(--paper-050); --surface-card:var(--paper-000); --surface-sunken:var(--paper-100); --surface-inset:var(--paper-200); --surface-invert:var(--ink-900); --surface-premium:var(--blue-900); --surface-premium-soft:var(--blue-050); /* Text */ --text-primary:var(--ink-900); --text-secondary:var(--ink-700); --text-muted:var(--ink-500); --text-faint:var(--ink-400); --text-on-invert:var(--paper-050); --text-link:var(--blue-700); --text-link-hover:var(--blue-600); /* Lines */ --border-subtle:var(--paper-200); --border-default:var(--paper-300); --border-strong:var(--paper-400); --border-focus:var(--blue-600); /* Interactive */ --action-primary-bg:var(--ink-900); --action-primary-fg:var(--paper-050); --action-primary-bg-hover:var(--ink-800); --action-secondary-bg:var(--paper-000); --action-secondary-fg:var(--ink-900); --action-accent-bg:var(--blue-700); --action-accent-fg:var(--paper-000); --action-disabled-bg:var(--paper-200); --action-disabled-fg:var(--ink-300); --focus-ring:0 0 0 3px var(--blue-100),0 0 0 1px var(--blue-600); /* Stance — the product's central semantic */ --stance-bullish-fg:var(--bull-700); --stance-bullish-bg:var(--bull-100); --stance-bullish-line:var(--bull-600); --stance-bearish-fg:var(--bear-700); --stance-bearish-bg:var(--bear-100); --stance-bearish-line:var(--bear-600); --stance-neutral-fg:var(--ink-700); --stance-neutral-bg:var(--neutral-100); --stance-neutral-line:var(--neutral-600); --stance-mixed-fg:var(--amber-700); --stance-mixed-bg:var(--amber-100); --stance-mixed-line:var(--amber-600); /* Price-level ladder roles */ --level-bull-target:var(--bull-600); --level-resistance:var(--ink-400); --level-current:var(--ink-900); --level-support:var(--ink-400); --level-hard-stop:var(--bear-600); --level-bear-target:var(--bear-300); /* Locked / paid */ --locked-fg:var(--blue-700); --locked-bg:var(--blue-050); --locked-border:var(--blue-100); } /* ── tokens/base.css ── */ /* Minimal element defaults so a bare page already looks like the product. No resets beyond what the brand needs. */ *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--surface-app);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);margin:0} p{margin:0;text-wrap:pretty} a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--blue-400);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)} a:hover{color:var(--text-link-hover);border-bottom-color:var(--blue-600)} button{font-family:inherit} :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)} .tb-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .tb-eyebrow{font-family:var(--font-ui);font-size:var(--text-micro);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)} /* ── tokens/web.css ── */ /* Web foundations — added Aug 2026 for tradingbrief.app. The phone system stays untouched; these tokens only describe what real widths need: breakpoints, container measures, a 12-column grid and section rhythm. Rule of thumb: prose never exceeds --measure-prose, no matter how wide the window. */ :root{ /* Breakpoints — used in media queries, not as values */ --bp-sm:480px; --bp-md:768px; /* phone -> tablet: single column ends here */ --bp-lg:1024px; /* sidebar/aside becomes possible */ --bp-xl:1280px; /* the width the desktop layout is designed at */ --bp-2xl:1536px; /* Containers — the page never goes edge-to-edge with text */ --container-page:1240px; /* header, footer, marketing blocks */ --container-reading:760px; /* a briefing, a legal document */ --container-narrow:560px; /* forms, single statements, share card copy */ /* Gutters — screen edge padding per class of width */ --gutter-web-sm:20px; --gutter-web-lg:48px; /* 12-column grid */ --grid-columns:12; /* @kind other */ --grid-gap:24px; --grid-gap-lg:32px; /* Vertical rhythm between marketing blocks. Bigger than any phone spacing: on a 1280 window a 72px gap reads as a paragraph break, not a section break. */ --section-y:64px; --section-y-lg:112px; --section-y-xl:144px; /* Measures — line length caps, in characters, tuned for German */ --measure-lead:38ch; /* hero one-liner, block intros */ --measure-heading:24ch; /* display headlines */ /* Web type steps the phone scale has no need for. Kept as three parts rather than a packed clamp() so each part stays a single classifiable value; compose at use site: font-size:clamp(var(--text-hero-min),var(--text-hero-fluid),var(--text-hero-max)) */ --text-hero-min:2.5rem; /* @kind font */ --text-hero-fluid:calc(1.6rem + 3.4vw); /* @kind font */ --text-hero-max:4.25rem; /* @kind font */ --text-block-title-min:1.625rem; /* @kind font */ --text-block-title-fluid:calc(1.2rem + 1.4vw); /* @kind font */ --text-block-title-max:2.375rem; /* @kind font */ /* Sticky site header height, so anchors and scroll padding agree */ --site-header-h:64px; } /* Links on the web get an underline you can actually see, from the ink-blue. The app never needed this: nothing there is a hyperlink. */ a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.18em;text-decoration-color:color-mix(in oklab,var(--text-link) 35%,transparent);transition:text-decoration-color var(--duration-fast,120ms) ease,color var(--duration-fast,120ms) ease} a:hover{color:var(--text-link-hover);text-decoration-color:currentColor} a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:2px} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--site-header-h) + 16px)} ::selection{background:var(--blue-100);color:var(--ink-900)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ── Structural / responsive classes, ported verbatim from the