/* ========================================================================== Corporate LP Design System v4 — Component styles ────────────────────────────────────────────────────────────────────────── Buttons, inputs, selects, segmented, checkbox/radio, chip (badge), card, alert. Consumes tokens from `colors_and_type.css`. Naming convention ----------------- Class names follow shadcn/ui's variant vocabulary: • Button variants: primary / secondary / outline / ghost / destructive / link • Chip variants: primary / secondary / outline / destructive + content-category accents (sale / rental / purchase) + semantic (success / warning / destructive) • Card variants: default / elevated / interactive (data-clickable) • Sizes: sm / md (default) / lg / xl ※ v4: all four sizes share height 44px (mobile tap-target). They differ only in horizontal padding (12 / 16 / 20 / 28) and font size. v4 changes (from v3) -------------------- • All control heights now resolve to 44px (the `--control-h-*` tokens are unified). Component code is unchanged — it still references the size-suffixed tokens, so the size names continue to work as labels for padding/typography differentiation. • `.button--xl` no longer sets `font-weight: bold` overriding the base semibold; the wireframe treats xl identically to lg/md in weight. • `.alert` padding tokenised onto `--sp-*` (was hard-coded 14px/16px). • `.chip` height 24px is kept as a small, content-relative dimension (would need `--height-chip` to be tokenised; not added since no other consumer needs it). • No hard-coded hex / px values introduced; change a token in colors_and_type.css and every component re-bases itself. ========================================================================== */ /* ============================================================ */ /* Button */ /* ============================================================ */ /* Base: shadcn `secondary`-equivalent (white + neutral border). Modifiers add a variant on top. v4: all sizes share height (44px) but differ in horizontal padding and font size. */ .button { --_h: var(--control-h-md); --_px: var(--control-px-md); --_fs: var(--text-body-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--_h); padding: 0 var(--_px); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--_fs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-normal); background: var(--secondary); color: var(--secondary-foreground); border: 1px solid var(--border); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--duration-base) var(--easing), border-color var(--duration-base) var(--easing), box-shadow var(--duration-base) var(--easing), transform var(--duration-fast) var(--easing), color var(--duration-base) var(--easing); } .button:hover { background: var(--muted); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .button:active { transform: translateY(1px); box-shadow: none; } .button:focus-visible { outline: none; box-shadow: var(--ring-focus); border-color: var(--primary); } /* sizes — v4: heights are unified, only padding & type differ */ .button--sm { --_h: var(--control-h-sm); --_px: var(--control-px-sm); --_fs: var(--text-body-sm); } .button--md { --_h: var(--control-h-md); --_px: var(--control-px-md); --_fs: var(--text-body-md); } .button--lg { --_h: var(--control-h-lg); --_px: var(--control-px-lg); --_fs: var(--text-body-lg); border-radius: var(--radius-lg); } .button--xl { --_h: var(--control-h-xl); --_px: var(--control-px-xl); --_fs: var(--text-body-lg); border-radius: var(--radius-lg); } /* variants — shadcn vocabulary */ /* primary — solid corporate navy. shadcn's `default` variant. */ .button--primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .button--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: var(--shadow-md); } .button--primary:active { background: var(--primary-active); border-color: var(--primary-active); } /* secondary — white with neutral border. Same as base, given an explicit modifier so HTML reads symmetrically with other variants. */ .button--secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); } .button--secondary:hover { background: var(--muted); border-color: var(--border-strong); } /* outline — transparent + primary stroke. Pairs with primary in hero. */ .button--outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); } .button--outline:hover { background: var(--primary-soft); border-color: var(--primary); } /* ghost — text-only with subtle hover bg. Used for nav-style triggers. */ .button--ghost { background: transparent; color: var(--foreground); border-color: transparent; } .button--ghost:hover { background: var(--accent); border-color: transparent; box-shadow: none; } /* destructive — for irreversible/dangerous actions. shadcn renames the former `danger` variant to `destructive` (matches token name). */ .button--destructive { background: var(--destructive-muted); color: var(--destructive); border-color: var(--destructive-border); } .button--destructive:hover { /* destructive の hover は muted bg よりやや濃く。alpha で表現すると destructive-border と同列の安定感になる。 */ background: rgb(184 38 38 / 0.10); border-color: var(--destructive); } /* link — text that looks like a link but lives in a