/* * Design tokens, reset, and base typography. * * Token names follow architecture-principles/laravel/design-system.md §2 and * are not project-specific. The values are. * * Direction: cool paper and blue-black ink for a private reading surface. * Notes are set in a serif at a generous measure because they are prose; * interface chrome is sans because it is not. */ :root { /* * Enables light-dark() below. The reader's override flips this to a * single value, which switches every token at once (research.md R1). */ color-scheme: light dark; /* Brand */ --color-primary: light-dark(#4a5bc4, #8b9af5); --color-primary-hover: light-dark(#3d4dab, #a3aff8); --color-secondary: light-dark(#5b6478, #8189a0); --color-secondary-hover: light-dark(#475061, #9aa2b8); --color-accent: light-dark(#c4784a, #d99a6f); /* Surfaces */ --color-background: light-dark(#f7f8fa, #14161a); --color-surface: light-dark(#ffffff, #1a1d22); --color-surface-raised: light-dark(#ffffff, #22262d); --color-border: light-dark(#d8dce4, #333844); --color-border-subtle: light-dark(#e8ebf0, #262b33); /* Text */ --color-text: light-dark(#1a1d24, #e4e6ea); --color-text-secondary: light-dark(#4b5263, #a8aebd); --color-text-muted: light-dark(#677089, #888f9e); --color-text-inverse: light-dark(#ffffff, #14161a); /* * Semantic. Both values are tuned to clear 4.5:1 against their own * -light surface in that theme (SC-005). The dark variants were missing * entirely before, leaving alerts dark-on-dark. */ --color-success: light-dark(#2c7657, #3da279); --color-success-light: light-dark(#e6f4ee, #16281f); --color-warning: light-dark(#8d621c, #be8426); --color-warning-light: light-dark(#fdf3e0, #2b2211); --color-error: light-dark(#a63d3d, #ca6e6e); --color-error-light: light-dark(#fbeaea, #2b1717); --color-info: light-dark(#3d6aa6, #648ec6); --color-info-light: light-dark(#eaf1fb, #16202e); /* Navigation */ --color-menubar: light-dark(#1a1d24, #0f1115); --color-menubar-hover: light-dark(#2a2e38, #1c2029); --color-menubar-text: #b8bfd0; --color-menubar-text-active: #ffffff; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px light-dark(rgb(26 29 36 / 6%), rgb(0 0 0 / 40%)); --shadow-md: 0 2px 8px light-dark(rgb(26 29 36 / 8%), rgb(0 0 0 / 45%)); --shadow-lg: 0 8px 24px light-dark(rgb(26 29 36 / 12%), rgb(0 0 0 / 55%)); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; /* * Typefaces. design-system.md §3 specifies Gotham Rounded, which is * licensed and unavailable here — there is no build pipeline to bundle it. * System stacks stand in; swap --font-ui if the licence is acquired. */ --font-reading: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Reading measure — the single most load-bearing number in the design. */ --measure: 68ch; } /* * An explicit choice (FR-003). The server writes data-theme onto , so * this is in effect before first paint — no flash (FR-005). */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { padding: 0; list-style: none; } img, picture, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } /* ----------------------------------------------------------------- base -- */ body { min-height: 100vh; margin: 0; background-color: var(--color-background); color: var(--color-text); font-family: var(--font-ui); font-size: 1rem; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } /* A visible focus ring everywhere, always. */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background-color: var(--color-primary); color: var(--color-text-inverse); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Screen-reader-only, for skip links and icon button labels. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }