/* * Tokens du design system « alexandre bruneau / journal » — repris tels quels de Claude Design * (projet b6622ea3, tokens/colors.css · typography.css · spacing.css · base.css). * Les @font-face sont posés par theme.json (settings.typography.fontFamilies), pas ici. * Ne pas retoucher à la main : toute évolution part du design system, puis se recopie. */ /* ---------- colors ---------- */ :root{ /* base — cool neutrals */ --mist:#F4F5F6;--mist-2:#E8EAED;--mist-3:#DCE0E5;--white:#FFFFFF; --ink:#0B1320;--ink-2:#2C3645;--ink-3:#4E5766;--ink-4:#8F97A3; --rule:#D5D9DF;--rule-strong:#0B1320; /* base — night (code notes, lightbox, dark theme) */ --night:#080D16;--night-2:#111827;--night-3:#1B2436;--night-rule:#232D40; --night-fg:#E7EBF1;--night-fg-2:#9AA4B4;--night-fg-3:#626D80; /* blues — the primary family */ --blue:#2342FF;--blue-ink:#1A33D1;--blue-soft:#D6DDFF;--blue-bright:#5B76FF; --sky:#3AA0FF;--navy:#0F2A6B;--steel:#6F8CB8; /* touch of red / pink — rare, for emphasis */ --pink:#FF3D7F;--red:#E4002B; /* category marks — 7–8px squares only */ --cat-code:#2342FF;--cat-travel:#3AA0FF;--cat-design:#FF3D7F;--cat-motor:#E4002B;--cat-note:#6F8CB8;--cat-music:#7C5CFF; /* syntax (on night) */ --syn-fg:#E7EBF1;--syn-comment:#626D80;--syn-keyword:#7C93FF;--syn-string:#7FD0FF;--syn-number:#FF7AA8;--syn-fn:#B9C6FF; /* semantic — light-dark() resolves per element color-scheme: follows the OS by default */ color-scheme:light dark; --bg:light-dark(var(--mist),var(--night));--surface:light-dark(var(--mist),var(--night));--surface-sunk:light-dark(var(--mist-2),var(--night-2));--surface-raised:light-dark(var(--white),var(--night-2));--surface-inverse:light-dark(var(--ink),var(--night-fg)); --fg:light-dark(var(--ink),var(--night-fg));--fg-muted:light-dark(var(--ink-2),#C9D0DB);--fg-subtle:light-dark(var(--ink-3),var(--night-fg-2));--fg-faint:light-dark(var(--ink-4),var(--night-fg-3));--fg-inverse:light-dark(var(--white),var(--night)); --border:light-dark(var(--rule),var(--night-rule));--border-strong:light-dark(var(--rule-strong),var(--night-fg)); --accent:light-dark(var(--blue),var(--blue-bright));--accent-fg:#FFFFFF;--accent-text:light-dark(var(--blue-ink),#8EA2FF);--accent-soft:light-dark(var(--blue-soft),rgba(91,118,255,.28));--hot:var(--pink); --link:light-dark(var(--ink),var(--night-fg));--link-hover:light-dark(var(--blue-ink),#8EA2FF);--focus:light-dark(var(--blue),var(--blue-bright)); --code-bg:light-dark(var(--night),#04070D);--code-bar:var(--night-2);--code-border:light-dark(var(--night-rule),var(--night-3));--code-fg:var(--night-fg);--code-muted:var(--night-fg-3); --scrim:rgba(8,13,22,.95);--placeholder:light-dark(var(--mist-2),var(--night-2));--placeholder-stripe:light-dark(var(--mist-3),var(--night-3)); } /* force a theme on any element (usually ) */ [data-theme="dark"]{color-scheme:dark} [data-theme="light"]{color-scheme:light} /* ---------- typography ---------- */ :root{ --font-sans:'Geist',ui-sans-serif,system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --fs-display-xl:clamp(56px,8.5vw,120px);--fs-display:clamp(44px,6vw,80px); --fs-h1:clamp(34px,4.2vw,52px);--fs-h2:30px;--fs-h3:22px; --fs-lead:22px;--fs-body:18px;--fs-ui:15px;--fs-small:13px;--fs-mono:13px;--fs-micro:11px; --lh-tight:.94;--lh-head:1.05;--lh-snug:1.3;--lh-body:1.65; --tracking-display:-.045em;--tracking-head:-.025em;--tracking-mono:.06em; --type-display:700 var(--fs-display)/var(--lh-tight) var(--font-sans); --type-h1:700 var(--fs-h1)/var(--lh-head) var(--font-sans); --type-h2:600 var(--fs-h2)/1.1 var(--font-sans); --type-h3:600 var(--fs-h3)/1.2 var(--font-sans); --type-body:400 var(--fs-body)/var(--lh-body) var(--font-sans); --type-lead:400 var(--fs-lead)/1.45 var(--font-sans); --type-ui:500 var(--fs-ui)/1.3 var(--font-sans); --type-meta:500 var(--fs-mono)/1.4 var(--font-mono); --type-code:400 14px/1.7 var(--font-mono); } /* ---------- spacing ---------- */ :root{ --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px; --page-max:1320px;--measure:680px;--gutter:clamp(16px,3vw,32px);--grid-gap:clamp(16px,2vw,28px); --r-0:0;--r-1:3px;--r-2:6px;--r-pill:999px; --bw:1px;--bw-strong:2px; --shadow-none:none;--shadow-float:0 12px 40px -8px rgba(11,19,32,.28),0 2px 6px rgba(11,19,32,.12); --ease:cubic-bezier(.2,.7,.2,1);--ease-in-out:cubic-bezier(.6,0,.3,1); --dur-1:120ms;--dur-2:220ms;--dur-3:420ms; --z-header:10;--z-overlay:100;--z-toast:200; } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{margin:0;font:var(--type-ui);background:var(--bg);color:var(--fg)} a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--fg-faint);transition:color var(--dur-1) var(--ease),text-decoration-color var(--dur-1) var(--ease)} a:hover{color:var(--link-hover);text-decoration-color:currentColor} ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} h1,h2,h3,h4{text-wrap:balance;margin:0} p{text-wrap:pretty} img{display:block;max-width:100%}