/* Copyright (c) 2026 Chinaready. All rights reserved. */
/* ==========================================================================
   Chinaready website production kit — class-based marketing components.

   This is the canonical, production CSS layer for the marketing surface,
   the website counterpart to ui_kits/product/product.css. The sibling *.jsx
   files in this folder are inline-style click-through prototypes for design
   reference only; consumers (site/) should build on the classes below.

   All values pull from DS tokens (dist/chinaready.css). Import after the token
   bundle so --cr-* custom properties resolve.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons — variants mirror ui_kits/website/Button.jsx:
   primary · secondary · ghost · on-dark · ghost-on-dark
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cr-space-2);
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--cr-radius-button);
  font-size: var(--cr-fs-body);
  font-weight: var(--cr-fw-semibold);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color var(--cr-dur-base) var(--cr-ease-standard),
    border-color var(--cr-dur-base) var(--cr-ease-standard),
    color var(--cr-dur-base) var(--cr-ease-standard),
    transform 0.25s var(--cr-ease-standard),
    box-shadow 0.25s var(--cr-ease-standard);
}

.btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--cr-shadow-card);
}

.btn--primary {
  background: var(--cr-brand-blue);
  color: var(--cr-on-dark-primary, #fff);
}

.btn--primary:hover {
  background: var(--cr-brand-blue-hover);
}

.btn--secondary {
  background: var(--cr-background, #fff);
  color: var(--cr-brand-blue);
  border-color: var(--cr-brand-blue);
}

.btn--secondary:hover {
  color: var(--cr-brand-blue-hover);
  border-color: var(--cr-brand-blue-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--cr-text-primary);
  border-color: var(--cr-border);
}

.btn--ghost:hover {
  border-color: var(--cr-text-primary);
}

.btn--on-dark {
  background: var(--cr-background, #fff);
  color: var(--cr-primary);
}

.btn--ghost-on-dark {
  background: transparent;
  color: var(--cr-on-dark-primary, #fff);
  border-color: var(--cr-on-dark-border);
}

.btn--ghost-on-dark:hover {
  border-color: var(--cr-on-dark-primary, #fff);
}

/* --------------------------------------------------------------------------
   Card — generic bordered surface; extend with BEM modifiers in page CSS.
   -------------------------------------------------------------------------- */

.site-card {
  display: flex;
  flex-direction: column;
  gap: var(--cr-space-3);
  padding: var(--cr-space-5);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-card, 8px);
  background: var(--cr-background, #fff);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s var(--cr-ease-standard),
    box-shadow 0.25s var(--cr-ease-standard),
    border-color var(--cr-dur-base) var(--cr-ease-standard);
}

a.site-card:hover,
.site-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--cr-shadow-card);
  border-color: var(--cr-brand-blue);
}

a.site-card:focus-visible,
.site-card--interactive:focus-visible {
  outline: var(--cr-border-focus);
  outline-offset: 3px;
}