/* ============================================================================ PAPER CONSOLE — the app.out.win design system (d.03.1 paper) ---------------------------------------------------------------------------- ONE stylesheet for the whole app: the logged-in shell (render.dart page()) AND the logged-out shell (dashboard.dart lightPage()). Both link this file from /static/app.css. Token NAMES here are the app-wide contract: every screen references them inline (var(--panel), var(--text), var(--green), var(--red), …) and by class (.panel, .btn, .muted, nav a, input/label). Self-contained; self-hosted fonts only (Inter Tight + DM Mono in app/static). No CDN, no webfonts, no JS. Served text/css by staticFile(). Palette source of truth: theme-d03.css (landing) + theme-signup-d03.css (native controls) + notify.dart emailHtml (transactional). Accent tokens (--green/--yellow/--blue/--red) are tuned READABLE-on-white ink (WCAG AA) because screens use them as `color:` on white cards — NOT the dark neons. ========================================================================== */ /* ── Self-hosted fonts ───────────────────────────────────────────────────── */ @font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900; font-display:swap;src:url(/static/inter-tight-var.woff2) format("woff2")} @font-face{font-family:"DM Mono";font-style:normal;font-weight:400; font-display:swap;src:url(/static/dm-mono-400.woff2) format("woff2")} @font-face{font-family:"DM Mono";font-style:normal;font-weight:500; font-display:swap;src:url(/static/dm-mono-500.woff2) format("woff2")} /* ── Tokens ──────────────────────────────────────────────────────────────── */ :root{ /* surfaces (both naming families — modules use both) */ --paper:#ececea; --bg:#ececea; --paper-bright:#f6f6f2; --paper-dim:#ddddda; --panel:#ffffff; --panel-2:#f9f9f6; --white:#fff; --black:#090909; /* ink / text (--ink and --text are aliases) */ --ink:#111111; --text:#111111; --muted:#666663; /* 4.87:1 on paper — contrast FLOOR */ --line:rgba(17,17,17,.16); /* brand + loud accents */ --purple:#602bc3; --purple-2:#7b43e6; --acid:#ddff54; /* the ONE loud CTA fill */ --green-neon:#2ce293; /* neon — fills / dark-context only */ /* semantic — legible-on-paper text ink (WCAG AA) */ --green:#0e7a4f; --green-deep:#0a7a45; --ok:#0e7a4f; --red:#b3261e; --danger-soft:rgba(179,38,30,.14); --yellow:#946a00; --warn:#8a5a00; --blue:#2563c9; --info:#2f5fd0; /* form fields */ --field-bg:#f9f9f6; --field-border:rgba(17,17,17,.5); /* geometry */ --radius:clamp(1rem,1.35vw,1.5rem); --radius-sm:.72rem; --header-h:82px; --gutter:clamp(1.25rem,3.3vw,4rem); --ease:cubic-bezier(.2,.8,.2,1); color-scheme:only light; /* pin native controls light */ } /* ── Base ────────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink); font-family:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI", Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision; font-size:15px;line-height:1.5} a{color:var(--purple);text-decoration:none} a:hover{text-decoration:underline} button{color:inherit;font:inherit} img{max-width:100%} ::selection{color:var(--white);background:var(--purple)} .mono{font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.69rem;letter-spacing:.07em;text-transform:uppercase} .muted{color:var(--muted)} /* dot-grid texture — the signature paper motif (fixed) */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(rgba(17,17,17,.09) .6px,transparent .6px); background-size:7px 7px;opacity:.28; mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 96%,transparent)} /* focus (WCAG 2.4.7); accent-filled controls flip to the acid ring */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--purple);outline-offset:2px} .btn:focus-visible,.btn-acid:focus-visible,.btn-primary:focus-visible, .header-cta:focus-visible{outline-color:var(--acid)} @media (prefers-reduced-motion:reduce){*,*::before,*::after{ animation-duration:.001ms!important;transition-duration:.001ms!important; scroll-behavior:auto!important}} /* ── Header / topnav ───────────────────────────────────────────────────────── ONE header language. Logged-in shell (render.dart) and logged-out shell (dashboard.dart) both emit
with the out.win wordmark. Logged-in adds