/*
 * EnyaClawd / Kerwin Research — shared design system v1
 *
 * This is an additive compatibility layer. It records the current visual
 * language and exposes reusable primitives without replacing page-specific
 * layouts. Existing pages can adopt it one component at a time.
 */

:root {
  /* Current site palette — keep these values stable across the migration. */
  --enya-color-canvas: #e8ddd2;
  --enya-color-surface: #fff1e5;
  --enya-color-surface-raised: #fffaf5;
  --enya-color-surface-tinted: #f3e4d7;
  --enya-color-surface-subtle: #f7e7d8;
  --enya-color-ink: #262220;
  --enya-color-ink-muted: #746b65;
  --enya-color-ink-subtle: #8c8178;
  --enya-color-ink-inverse: #fff1e5;
  --enya-color-reading: #404945;
  --enya-color-reading-inverse: #f5e8dc;
  --enya-color-brand: #103f35;
  --enya-color-brand-hover: #1f5a4d;
  --enya-color-brand-soft: #dbe9e2;
  --enya-color-brand-wash: #dce8e2;
  --enya-color-accent: #9a5c38;
  --enya-color-accent-soft: #f1dfd1;
  --enya-color-danger: #7d2933;
  --enya-color-danger-soft: #f7e2e4;
  --enya-color-line: #cdbfb3;
  --enya-color-line-strong: #a99d94;
  --enya-color-overlay: rgba(38, 34, 32, .14);

  /* Semantic aliases for legacy article styles. */
  --enya-bg: var(--enya-color-canvas);
  --enya-paper: var(--enya-color-surface);
  --enya-paper-raised: var(--enya-color-surface-raised);
  --enya-ink: var(--enya-color-ink);
  --enya-muted: var(--enya-color-ink-muted);
  --enya-line: var(--enya-color-line);
  --enya-green: var(--enya-color-brand);
  --enya-green-soft: var(--enya-color-brand-soft);
  --enya-copper: var(--enya-color-accent);
  --enya-wine: var(--enya-color-danger);

  --enya-font-sans: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --enya-font-serif: Georgia, "Times New Roman", "Songti SC", "STSong", serif;
  --enya-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --enya-text-xs: 10px;
  --enya-text-sm: 12px;
  --enya-text-body: 16px;
  --enya-text-lead: 19px;
  --enya-text-h3: clamp(20px, 2.4vw, 28px);
  --enya-text-h2: clamp(27px, 3.4vw, 40px);
  --enya-text-display: clamp(34px, 5vw, 58px);

  --enya-space-1: 4px;
  --enya-space-2: 8px;
  --enya-space-3: 12px;
  --enya-space-4: 16px;
  --enya-space-5: 20px;
  --enya-space-6: 24px;
  --enya-space-7: 32px;
  --enya-space-8: 40px;
  --enya-space-9: 56px;
  --enya-space-10: 72px;

  --enya-content-reading: 760px;
  --enya-content-wide: 1120px;
  --enya-radius-control: 2px;
  --enya-radius-card: 2px;
  --enya-radius-pill: 999px;
  --enya-shadow-card: 0 12px 34px rgba(38, 34, 32, .08);
  --enya-shadow-popover: 0 18px 42px rgba(38, 34, 32, .16);
  --enya-focus-ring: 0 0 0 3px rgba(154, 92, 56, .28);
  --enya-motion-fast: 140ms ease;
  --enya-motion-standard: 220ms ease;

  /* Semantic aliases used by the generated research hub pages. */
  --background: var(--enya-color-surface);
  --foreground: var(--enya-color-ink);
  --primary: var(--enya-color-brand);
  --primary-foreground: var(--enya-color-ink-inverse);
  --muted: var(--enya-color-surface-subtle);
  --muted-foreground: var(--enya-color-ink-muted);
  --border: var(--enya-color-line);
  --accent: var(--enya-color-brand-wash);
  --card: var(--enya-color-surface-raised);
  --secondary: var(--enya-color-surface-subtle);
  --destructive: var(--enya-color-danger);
}

/* Page-level adoption hook. It is intentionally low-impact. */
body[data-enya-design-system="v1"] {
  color: var(--enya-ink);
  font-family: var(--enya-font-sans);
}

.enya-ui-surface {
  color: var(--enya-ink);
  background: var(--enya-paper);
  border: 1px solid var(--enya-line);
}

.enya-ui-card {
  padding: var(--enya-space-6);
  color: var(--enya-ink);
  background: var(--enya-paper-raised);
  border: 1px solid var(--enya-line);
  border-radius: var(--enya-radius-card);
  box-shadow: var(--enya-shadow-card);
}

.enya-ui-kicker {
  margin: 0;
  color: var(--enya-green);
  font: 800 var(--enya-text-xs)/1.2 var(--enya-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.enya-ui-title {
  margin: 0;
  color: var(--enya-ink);
  font-family: var(--enya-font-serif);
  letter-spacing: -.035em;
}

.enya-ui-title--display { font-size: var(--enya-text-display); line-height: 1.04; }
.enya-ui-title--section { font-size: var(--enya-text-h2); line-height: 1.14; }

.enya-ui-muted {
  color: var(--enya-muted);
  font-size: var(--enya-text-sm);
}

.enya-ui-divider {
  height: 1px;
  margin: var(--enya-space-7) 0;
  background: var(--enya-line);
  border: 0;
}

.enya-ui-link {
  color: var(--enya-green);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--enya-motion-fast), text-decoration-color var(--enya-motion-fast);
}

.enya-ui-link:hover,
.enya-ui-link:focus-visible {
  color: var(--enya-accent);
  text-decoration-color: currentColor;
}

.enya-ui-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--enya-space-2);
  padding: 8px 14px;
  border: 1px solid var(--enya-green);
  border-radius: var(--enya-radius-control);
  color: var(--enya-green);
  background: transparent;
  font: 800 var(--enya-text-sm)/1.2 var(--enya-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--enya-motion-fast), background var(--enya-motion-fast), border-color var(--enya-motion-fast), transform var(--enya-motion-fast);
}

.enya-ui-button:hover,
.enya-ui-button:focus-visible {
  color: var(--enya-ink-inverse);
  background: var(--enya-accent);
  border-color: var(--enya-accent);
  transform: translateY(-1px);
}

.enya-ui-button--primary {
  color: var(--enya-ink-inverse);
  background: var(--enya-green);
}

.enya-ui-button--primary:hover,
.enya-ui-button--primary:focus-visible {
  background: var(--enya-accent);
  border-color: var(--enya-accent);
}

.enya-ui-callout {
  padding: var(--enya-space-4) var(--enya-space-5);
  color: var(--enya-ink);
  background: var(--enya-color-surface-tinted);
  border-left: 3px solid var(--enya-accent);
}

.enya-ui-callout--positive { border-left-color: var(--enya-green); background: var(--enya-green-soft); }
.enya-ui-callout--danger { border-left-color: var(--enya-wine); background: var(--enya-color-danger-soft); }

.enya-ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--enya-space-2);
  color: var(--enya-muted);
  font: 700 var(--enya-text-xs)/1.2 var(--enya-font-sans);
  letter-spacing: .04em;
}

.enya-ui-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--enya-accent);
}

.enya-ui-status--live::before { background: var(--enya-green); }
.enya-ui-status--alert::before { background: var(--enya-wine); }

.enya-ui-table-scroll {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--enya-line);
}

.enya-ui-table-scroll table { min-width: 640px; }

.enya-ui-focus:focus-visible,
.enya-ui-button:focus-visible,
.enya-ui-link:focus-visible {
  outline: none;
  box-shadow: var(--enya-focus-ring);
}

.enya-ui-mono {
  font-family: var(--enya-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Generated hub component bridge. These values intentionally match the
 * current site; the bridge makes the next migration a token swap, not a
 * visual rewrite. */
body[data-enya-design-system="v1"] .mast {
  color: var(--enya-color-ink-inverse);
  background: var(--enya-color-brand);
}

body[data-enya-design-system="v1"] .header {
  background: var(--enya-color-surface-raised);
}

body[data-enya-design-system="v1"] .brand,
body[data-enya-design-system="v1"] .monogram {
  color: var(--enya-color-brand);
}

body[data-enya-design-system="v1"] .header nav .active {
  color: var(--enya-color-danger);
  border-color: var(--enya-color-danger);
}

body[data-enya-design-system="v1"] .eyebrow.amber {
  color: var(--enya-color-accent);
}

body[data-enya-design-system="v1"] .page-heading h1 {
  color: var(--enya-color-ink);
  font-family: var(--enya-font-serif);
}

body[data-enya-design-system="v1"] .page-heading h1 .serif {
  color: var(--enya-color-brand);
}

body[data-enya-design-system="v1"] .research-row {
  border-color: var(--enya-color-line);
}

body[data-enya-design-system="v1"] .research-row .eyebrow {
  color: var(--enya-color-danger);
}

body[data-enya-design-system="v1"] .research-row time,
body[data-enya-design-system="v1"] .research-row small,
body[data-enya-design-system="v1"] .muted {
  color: var(--enya-color-ink-muted);
}

body[data-enya-design-system="v1"] .primary-link,
body[data-enya-design-system="v1"] .map-stage[data-active] {
  color: var(--enya-color-ink-inverse);
  background: var(--enya-color-brand);
}

body[data-enya-design-system="v1"] .primary-link:hover {
  background: var(--enya-color-brand-hover);
}

body[data-enya-design-system="v1"] .reading-note {
  background: var(--enya-color-brand-wash);
}

body[data-enya-design-system="v1"] .watch-panel {
  background: var(--enya-color-surface-subtle);
}

body[data-enya-design-system="v1"] footer {
  color: var(--enya-color-ink-inverse);
  background: var(--enya-color-brand);
}

@media (prefers-reduced-motion: reduce) {
  .enya-ui-link,
  .enya-ui-button { transition: none; }
  .enya-ui-button:hover,
  .enya-ui-button:focus-visible { transform: none; }
}

@media (max-width: 760px) {
  .enya-ui-card { padding: var(--enya-space-5); }
  .enya-ui-title--display { font-size: clamp(32px, 10vw, 44px); }
}

@media print {
  .enya-ui-button { color: var(--enya-ink); background: transparent; }
  .enya-ui-card { box-shadow: none; }
}

/* Homepage primary entry for the Kerwin AI Investment Skill. */
body[data-enya-design-system="v1"] .skill-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: var(--enya-space-8);
  align-items: stretch;
  margin-top: var(--enya-space-9);
  padding: var(--enya-space-7) var(--enya-space-8);
  color: var(--enya-color-ink-inverse);
  background: var(--enya-color-brand);
  border: 1px solid var(--enya-color-brand);
}

body[data-enya-design-system="v1"] .skill-promo-main { min-width: 0; }

body[data-enya-design-system="v1"] .skill-promo .eyebrow {
  color: var(--enya-color-brand-wash);
}

body[data-enya-design-system="v1"] .skill-promo h2 {
  margin: var(--enya-space-3) 0;
  color: var(--enya-color-ink-inverse);
  font-family: var(--enya-font-serif);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.14;
  letter-spacing: -.03em;
}

body[data-enya-design-system="v1"] .skill-promo h2 span {
  color: var(--enya-color-accent-soft);
}

body[data-enya-design-system="v1"] .skill-promo p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: var(--enya-color-ink-inverse);
  font-size: var(--enya-text-body);
  line-height: 1.75;
}

body[data-enya-design-system="v1"] .skill-promo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--enya-space-3);
  align-items: center;
  margin-top: var(--enya-space-6);
}

body[data-enya-design-system="v1"] .skill-promo-primary,
body[data-enya-design-system="v1"] .skill-promo-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  transition: background var(--enya-motion-fast), color var(--enya-motion-fast), border-color var(--enya-motion-fast);
}

body[data-enya-design-system="v1"] .skill-promo-primary {
  color: var(--enya-color-brand);
  background: var(--enya-color-brand-wash);
}

body[data-enya-design-system="v1"] .skill-promo-primary:hover {
  color: var(--enya-color-brand);
  background: var(--enya-color-surface-raised);
}

body[data-enya-design-system="v1"] .skill-promo-download {
  color: var(--enya-color-ink-inverse);
  border: 1px solid var(--enya-color-brand-wash);
}

body[data-enya-design-system="v1"] .skill-promo-download:hover {
  color: var(--enya-color-brand);
  background: var(--enya-color-brand-wash);
  border-color: var(--enya-color-brand-wash);
}

body[data-enya-design-system="v1"] .skill-promo-primary:focus-visible,
body[data-enya-design-system="v1"] .skill-promo-download:focus-visible {
  outline: none;
  box-shadow: var(--enya-focus-ring);
}

body[data-enya-design-system="v1"] .skill-promo-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--enya-space-4);
  min-width: 0;
  padding-left: var(--enya-space-7);
  border-left: 1px solid #739587;
}

body[data-enya-design-system="v1"] .skill-promo-index {
  color: var(--enya-color-accent-soft);
  font-family: var(--enya-font-serif);
  font-size: 54px;
  line-height: 1;
}

body[data-enya-design-system="v1"] .skill-promo-aside strong {
  display: block;
  color: var(--enya-color-ink-inverse);
  font: 700 12px/1.6 var(--enya-font-mono);
  letter-spacing: .08em;
}

body[data-enya-design-system="v1"] .skill-promo-aside small {
  color: var(--enya-color-brand-wash);
  font-size: 13px;
}

@media (max-width: 760px) {
  body[data-enya-design-system="v1"] .skill-promo {
    grid-template-columns: 1fr;
    gap: var(--enya-space-6);
    padding: var(--enya-space-6) var(--enya-space-5);
  }

  body[data-enya-design-system="v1"] .skill-promo-aside {
    gap: var(--enya-space-3);
    padding-top: var(--enya-space-5);
    padding-left: 0;
    border-top: 1px solid #739587;
    border-left: 0;
  }

  body[data-enya-design-system="v1"] .skill-promo-index { font-size: 44px; }
}