/* ===================================================================== FOLIO — "Press" design system tokens AI document & micro-app publishing platform Bold / high-contrast / editorial direction --------------------------------------------------------------------- Drop-in CSS custom properties + a few utility classes. In a real codebase, map these to your theme system (Tailwind config, CSS vars, design-token JSON, etc.) rather than copying class names. ===================================================================== */ :root { /* ---- Surfaces ---- */ --paper: #F3EFE6; /* page background (warm cream) */ --surface-input: #FFFFFF; /* text inputs / search fields */ --surface-card: #FFFFFF; /* light cards on paper */ --ink: #16130F; /* primary text + all structural borders */ --ink-panel: #1C1813; /* nested panel inside a dark block */ --ink-divider: #332E27; /* divider on dark surfaces */ /* ---- Accent ---- */ --accent: #FF4A1C; /* vermilion — timers, numbers, CTAs */ --accent-on: #FFFFFF; /* text on accent fills */ --accent-deep: #B5330A; /* small accent text on light surfaces (AA); bright --accent stays for fills/numerals/dark-surface text */ /* ---- Text ---- */ --text-strong: #16130F; /* headlines, body on light */ --text-muted: #4A463E; /* secondary body on light */ --text-label: #6B6760; /* eyebrows, meta, captions — darkened from #8A8579; was 3.2:1 on paper (WCAG AA fail); now ~4.9:1 */ --text-faint: #C4BEB0; /* upcoming / disabled */ --text-on-dark: #F3EFE6; /* body on dark surface */ --text-on-dark-mut: #C9C4B8; /* secondary on dark */ --text-on-dark-lbl: #A39E92; /* labels on dark */ /* ---- Lines & fills ---- */ --hairline: #D8D2C4; /* soft row dividers inside cards */ --chip-fill: #EDE7DA; /* capability/tag chips on light */ --row-active: #FFE9E2; /* highlighted "now" agenda row */ /* ---- Semantic: publication visibility ---- */ --vis-public: #067647; /* public (border + dot + label) */ --vis-identity: #B54708; /* identity-aware */ --vis-restricted: #B42318; /* restricted */ /* ---- Geometry ---- */ --border-w: 1px; /* ALL borders are 1px (no thick slabs) */ --radius: 0; /* sharp corners everywhere */ --container: 1220px; /* marketing/gallery/dash max width */ --container-narrow: 1000px; /* the published app surface */ --pad-x: 30px; /* horizontal page padding */ /* ---- Type ---- */ --font: "Archivo", system-ui, -apple-system, sans-serif; /* Weights in use: 400 body · 500 body-medium · 700 · 800 · 900 display */ } /* --------------------------------------------------------------------- Typography utilities (the Press scale) --------------------------------------------------------------------- */ .press-display { font-family:var(--font); font-weight:900; font-size:96px; line-height:.92; letter-spacing:-.045em; color:var(--text-strong); } .press-h1 { font-family:var(--font); font-weight:900; font-size:64px; line-height:.96; letter-spacing:-.04em; color:var(--text-strong); } .press-h2 { font-family:var(--font); font-weight:900; font-size:44px; line-height:1.02; letter-spacing:-.03em; color:var(--text-strong); } .press-title { font-family:var(--font); font-weight:800; font-size:21px; line-height:1.1; letter-spacing:-.02em; color:var(--text-strong); } .press-eyebrow { font-family:var(--font); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-deep); } .press-eyebrow--on-dark { color: var(--accent); } .press-label { font-family:var(--font); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); } .press-meta { font-family:var(--font); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-label); } .press-body { font-family:var(--font); font-weight:500; font-size:17px; line-height:1.5; color:var(--text-muted); } .press-numeral { font-family:var(--font); font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.05em; color:var(--accent); } /* size set per use */ /* --------------------------------------------------------------------- Components --------------------------------------------------------------------- */ /* Buttons — always uppercase, weight 800, sharp corners */ .press-btn { font-family:var(--font); font-weight:800; font-size:14px; text-transform:uppercase; border-radius:var(--radius); padding:13px 20px; cursor:pointer; display:inline-block; border:0; } .press-btn--solid { background:var(--ink); color:var(--text-on-dark); } .press-btn--accent { background:var(--accent); color:var(--ink); } .press-btn--outline { background:transparent; color:var(--ink); border:var(--border-w) solid var(--ink); padding:12px 20px; } /* Capability / tag chip */ .press-chip { font-family:var(--font); font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); background:var(--chip-fill); padding:4px 9px; border-radius:var(--radius); } /* Outlined accent chip (challenge-loop suggestions) */ .press-chip--accent { background:transparent; color:var(--accent-deep); border:var(--border-w) solid var(--accent); } /* Text input / search field — note the WHITE fill so it reads as an input */ .press-input { background:var(--surface-input); color:var(--text-strong); border:var(--border-w) solid var(--ink); border-radius:var(--radius); font-family:var(--font); font-weight:500; font-size:15px; padding:14px 18px; } .press-input::placeholder { color:var(--text-label); } /* Card / table container */ .press-card { background:var(--surface-card); border:var(--border-w) solid var(--ink); border-radius:var(--radius); } .press-row { border-bottom:var(--border-w) solid var(--hairline); } /* Visibility pill — set color via the three modifiers */ .press-vis { display:inline-flex; align-items:center; gap:6px; font-family:var(--font); font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border:var(--border-w) solid currentColor; } .press-vis--public { color:var(--vis-public); } .press-vis--identity { color:var(--vis-identity); } .press-vis--restricted { color:var(--vis-restricted); } /* Dark block (timer surface, footer, sidebar) */ .press-dark { background:var(--ink); color:var(--text-on-dark); } /* --------------------------------------------------------------------- Focus ring — visible keyboard-navigation outline on all interactive elements. Uses the accent token so it reads on both light and dark surfaces. outline-offset:2px keeps it outside the element border. --------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --------------------------------------------------------------------- Skip link — visually hidden until focused (keyboard navigation). Positions to the top-left corner on focus so it reads before anything else on the page. --------------------------------------------------------------------- */ .skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; background: var(--ink); color: var(--text-on-dark); padding: 12px 20px; font-family: var(--font); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; } .skip-link:focus { position: fixed; left: 0; top: 0; width: auto; height: auto; overflow: visible; } /* --------------------------------------------------------------------- Screen-reader only — visually hidden but announced by assistive tech. Use for supplemental text (e.g., "(coming soon)") that sighted users don't need but AT users benefit from. --------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------- Responsive type scale + padding (≤ 768 px) Shared rules only — page-local grid collapses live in their own