/** * Shared Component Styles * * Used across all adapter integrations. Colors come from tokens.css so the same * rules cover both light and dark themes via the `.dark` class on . */ /* Counter Component */ .counter-container { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--card-foreground); max-width: 300px; } .counter-value { font-size: 3rem; font-weight: bold; font-family: var(--font-mono); color: var(--foreground); margin: 0 0 0.5rem 0; text-align: center; } .counter-doubled { font-size: 1rem; color: var(--muted-foreground); margin: 0 0 1rem 0; text-align: center; } .counter-buttons { display: flex; gap: 0.5rem; justify-content: center; } /* Button styles */ .btn { padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; } .btn-increment { background: var(--primary); color: var(--primary-foreground); } .btn-increment:hover { background: color-mix(in oklch, var(--primary) 88%, var(--foreground)); } .btn-decrement { background: var(--destructive); color: var(--destructive-foreground); } .btn-decrement:hover { background: color-mix(in oklch, var(--destructive) 88%, var(--foreground)); } .btn-reset { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); } .btn-reset:hover { background: var(--accent); color: var(--accent-foreground); } /* Page layout */ .page-container { font-family: var(--font-sans); max-width: 800px; margin: 0 auto; padding: 2rem 1rem; color: var(--foreground); } .page-title { font-size: 1.5rem; font-weight: bold; color: var(--foreground); margin-bottom: 1.5rem; } .page-nav { margin-top: 2rem; } .page-nav a { color: var(--foreground); text-decoration: none; } .page-nav a:hover { text-decoration: underline; }