/* CommiTea spacing, radius, shadow, border & motion tokens. */ :root { /* spacing — 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* radii — crisp, not bubbly */ --radius-1: 4px; /* chips, inputs' inner elements */ --radius-2: 6px; /* buttons, inputs */ --radius-3: 10px; /* cards, dialogs */ --radius-round: 999px; /* borders */ --border-w: 1px; --rule-double: 3px double var(--border-strong); /* fine-stationery section rule */ /* shadows — cool, restrained */ --shadow-1: 0 1px 2px rgba(20, 34, 28, 0.06); --shadow-2: 0 2px 8px rgba(20, 34, 28, 0.08), 0 1px 2px rgba(20, 34, 28, 0.05); --shadow-3: 0 12px 32px rgba(20, 34, 28, 0.14), 0 2px 8px rgba(20, 34, 28, 0.07); --shadow-jade-line: inset 0 2px 0 var(--jade); /* jade top rule on key cards */ /* motion — settled, never bouncy */ --ease-out: cubic-bezier(0.25, 0.6, 0.3, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1); /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-base: 200ms; /* @kind other */ --duration-slow: 320ms; /* @kind other */ } [data-theme="dark"] { --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25); }