@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');

/* Contents X 2026 brand tokens. Load before page CSS or import from a page layer. */
:root {
  --cx-font-ja: 'Noto Sans JP', sans-serif;
  --cx-font-latin: 'Inter', Arial, sans-serif;
  --cx-color-ink: #07143b;
  --cx-color-body: #172549;
  --cx-color-muted: #52627e;
  --cx-color-border: #d9e4f2;
  --cx-color-surface: #f5f9ff;
  --cx-color-white: #fff;
  --cx-color-sales: #005bfa;
  --cx-color-sales-soft: #eaf3ff;
  --cx-color-creative: #fa4d12;
  --cx-color-creative-text: #b83806;
  --cx-color-creative-soft: #fff3ec;
  --cx-type-display: clamp(2.625rem, 5.6vw, 5.875rem);
  --cx-type-page: clamp(2.125rem, 4vw, 3.5rem);
  --cx-type-section: clamp(1.75rem, 3.4vw, 3.25rem);
  --cx-type-card: clamp(1.25rem, 2vw, 1.75rem);
  --cx-type-lead: clamp(1.0625rem, 1.55vw, 1.3125rem);
  --cx-type-body: 1rem;
  --cx-type-small: .875rem;
  --cx-type-label: .75rem;
  --cx-weight-body: 400;
  --cx-weight-lead: 500;
  --cx-weight-strong: 700;
  --cx-weight-heading: 900;
  --cx-motion-fast: .18s;
  --cx-motion-ui: .3s;
  --cx-motion-reveal: .75s;
  --cx-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Small shared parts. Page-specific classes continue to own layout and content. */
.cx-ui-surface { background: var(--cx-color-surface); border: 1px solid var(--cx-color-border); }
.cx-ui-pill { border-radius: 999px; }
.cx-ui-card {
  transition: transform var(--cx-motion-ui) var(--cx-motion-ease),
    box-shadow var(--cx-motion-ui) ease,
    border-color var(--cx-motion-ui) ease;
}
.cx-ui-action {
  transition: transform var(--cx-motion-ui) var(--cx-motion-ease),
    color var(--cx-motion-fast) ease,
    background-color var(--cx-motion-fast) ease,
    border-color var(--cx-motion-fast) ease,
    box-shadow var(--cx-motion-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
  .cx-ui-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(7, 20, 59, .10); }
  .cx-ui-action:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .cx-ui-card, .cx-ui-action { transition: none; }
  .cx-ui-card:hover, .cx-ui-action:hover { transform: none; }
}

/* Use on copy placed directly over a photograph. The image itself also needs
   a sufficiently dark or light overlay; a stroke alone cannot ensure contrast. */
.cx-image-text--light {
  color: var(--cx-color-white);
  text-shadow: 0 2px 12px rgba(7, 20, 59, .8), 0 0 2px rgba(7, 20, 59, .9);
}
.cx-image-text--dark {
  color: var(--cx-color-ink);
  -webkit-text-stroke: .6px var(--cx-color-white);
  paint-order: stroke fill;
  text-shadow: 0 0 8px var(--cx-color-white), 0 1px 2px var(--cx-color-white);
}