/* * Quire design tokens. * * Two themes share one set of semantic names — components should never * reference a raw color/size, only a token — so switching `data-theme` * on is the entire theming mechanism. * * "paper" (default): a gathered-leaves, worktable feel — warm parchment * surfaces, ink-brown text, restrained accent colors. See * docs/design-feel.md for the reasoning. * "ink": the same feel after dark — warm dark leather/ink, not the cold * blue-slate "tech dashboard" dark mode this replaces. */ :root, [data-theme="paper"] { /* Surfaces */ --color-surface-page: #efe8d8; --color-surface-card: #fbf6ec; --color-surface-sunken: #e6dec8; /* shelf tray, recessed areas */ --color-surface-overlay: #fffdf8; /* Borders */ --color-border: #ddd2b3; --color-border-strong: #c9bb95; /* Text (ink) */ --color-text-primary: #2c2620; --color-text-secondary: #5b5142; --color-text-muted: #8a7f68; --color-text-faint: #b1a489; /* Brand */ --color-brand: #7c3b32; --color-brand-strong: #642d26; --color-brand-wash: #f1e1db; /* Gesture / state semantics — muted on purpose; a flag is a routine screen result, not an alarm (see docs/design-feel.md). */ --color-accept: #4f6b4a; --color-accept-wash: #e7ede2; --color-defer: #51637a; --color-defer-wash: #e4e9ee; --color-reject: #7a3a52; --color-reject-wash: #f0e1e6; --color-flagged: #9c5a2e; --color-flagged-wash: #f3e6d3; /* Elevation */ --shadow-color: 43 38 32; --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.07); --shadow-md: 0 2px 8px rgb(var(--shadow-color) / 0.09); --shadow-lg: 0 12px 28px rgb(var(--shadow-color) / 0.14); --focus-ring: 0 0 0 3px rgb(124 59 50 / 0.25); /* derived from --color-brand */ --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a7f68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); /* derived from --color-text-muted */ } [data-theme="ink"] { --color-surface-page: #1c1812; --color-surface-card: #26201a; --color-surface-sunken: #2e271d; --color-surface-overlay: #2c2620; --color-border: #3a3226; --color-border-strong: #4d4434; --color-text-primary: #ece4d3; --color-text-secondary: #c2b89f; --color-text-muted: #8d8268; --color-text-faint: #66604c; --color-brand: #c97b5c; --color-brand-strong: #e0936f; --color-brand-wash: #3a2a23; --color-accept: #8caa84; --color-accept-wash: #2a3327; --color-defer: #8ca3bd; --color-defer-wash: #29323b; --color-reject: #b06e89; --color-reject-wash: #3a2730; --color-flagged: #d2965f; --color-flagged-wash: #3d3022; --shadow-color: 0 0 0; --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.3); --shadow-md: 0 2px 10px rgb(var(--shadow-color) / 0.4); --shadow-lg: 0 14px 32px rgb(var(--shadow-color) / 0.5); --focus-ring: 0 0 0 3px rgb(201 123 92 / 0.35); --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238d8268' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); /* derived from --color-text-muted */ } :root { /* Type families — system stacks only, no network font fetch. Display serif carries the "written, not computed" judgment text (card directions, the wordmark); body sans carries fast-scan UI. */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; /* Type scale */ --text-xs: 0.6875rem; /* 11px — micro labels */ --text-sm: 0.8125rem; /* 13px — meta, badges */ --text-base: 0.9375rem; /* 15px — body / UI default */ --text-md: 1.0625rem; /* 17px — card direction text */ --text-lg: 1.25rem; /* 20px — section headers */ --text-xl: 1.625rem; /* 26px — page title */ --text-2xl: 2.25rem; /* 36px — display only */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* uppercase micro-labels */ /* Spacing — 4px grid */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Radius — soft but not bubbly; bound-paper edges, not app-icon corners */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Motion — deliberate, decelerating settle; no bounce/spring/elastic. --duration-shelf is intentionally the longest: the defer gesture is the one place the spec asks the animation to *teach* the meaning. */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms; --duration-shelf: 480ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-settle: cubic-bezier(0.16, 1, 0.3, 1); }