:root {
  color-scheme: light;
  --ck-core-radius: 0;
  --ck-core-background: oklch(0.985 0 0);
  --ck-core-foreground: oklch(0.12 0 0);
  --ck-core-surface: oklch(1 0 0);
  --ck-core-surface-foreground: oklch(0.12 0 0);
  --ck-core-secondary: oklch(0.95 0 0);
  --ck-core-secondary-foreground: oklch(0.12 0 0);
  --ck-core-muted: oklch(0.94 0 0);
  --ck-core-muted-foreground: oklch(0.45 0 0);
  --ck-core-accent: oklch(0.92 0 0);
  --ck-core-accent-foreground: oklch(0.12 0 0);
  --ck-core-border: oklch(0.85 0 0);
  --ck-core-rule: oklch(0.2 0 0);
  --ck-core-destructive: oklch(0.577 0.245 27.325);
  --ck-core-destructive-foreground: oklch(0.984 0.003 247.858);
  --ck-core-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --ck-core-font-serif: "Playfair Display", "Times New Roman", serif;
  --ck-core-space-1: 0.25rem;
  --ck-core-space-2: 0.5rem;
  --ck-core-space-3: 0.75rem;
  --ck-core-space-4: 1rem;
  --ck-core-space-5: 1.5rem;
  --ck-core-space-6: 2.5rem;
  --ck-core-space-7: 4rem;
  --ck-core-page-gutter: var(--ck-core-space-5);
  --ck-core-header-height: 5rem;
  --ck-core-header-padding-block: 1.25rem;
  --ck-core-panel-padding: var(--ck-core-space-5);
  --ck-core-button-padding-block: 0.875rem;
  --ck-core-button-padding-inline: 1.375rem;
  --ck-core-focus-width: 2px;
  --ck-core-focus-offset: 3px;
}

.dark {
  color-scheme: dark;
  --ck-core-background: oklch(0.13 0 0);
  --ck-core-foreground: oklch(0.97 0.002 90);
  --ck-core-surface: oklch(0.13 0 0);
  --ck-core-surface-foreground: oklch(0.97 0.002 90);
  --ck-core-secondary: oklch(0.2 0 0);
  --ck-core-secondary-foreground: oklch(0.97 0.002 90);
  --ck-core-muted: oklch(0.2 0 0);
  --ck-core-muted-foreground: oklch(0.65 0 0);
  --ck-core-accent: oklch(0.22 0 0);
  --ck-core-accent-foreground: oklch(0.97 0.002 90);
  --ck-core-border: oklch(0.28 0 0);
  --ck-core-rule: oklch(0.8 0 0);
  --ck-core-destructive: oklch(0.55 0.2 25);
  --ck-core-destructive-foreground: oklch(0.97 0.002 90);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background: var(--ck-core-background);
  color: var(--ck-core-foreground);
  font-family: var(--ck-core-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--ck-core-background);
  color: var(--ck-core-foreground);
  font-family: inherit;
}

button, input, select, textarea {
  border-radius: var(--ck-core-radius);
  color: inherit;
  font: inherit;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--ck-core-focus-width) solid var(--ck-core-foreground);
  outline-offset: var(--ck-core-focus-offset);
}

.ck-core-display-1 {
  color: var(--ck-core-foreground);
  font: 400 40px/1.05 var(--ck-core-font-serif);
  letter-spacing: -0.01em;
}

.ck-core-display-2 {
  color: var(--ck-core-foreground);
  font: 400 28px/1.08 var(--ck-core-font-serif);
}

.ck-core-lead {
  color: color-mix(in oklch, var(--ck-core-foreground) 85%, transparent);
  font: 400 18px/1.6 var(--ck-core-font-sans);
}

.ck-core-eyebrow,
.ck-core-caption {
  color: var(--ck-core-muted-foreground);
  font-family: var(--ck-core-font-sans);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.ck-core-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
}

.ck-core-caption {
  font-size: 12px;
  letter-spacing: 0.14em;
}

.ck-core-nav-link {
  color: var(--ck-core-foreground);
  font: 500 13px/1 var(--ck-core-font-sans);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.ck-core-button {
  border: 1px solid var(--ck-core-foreground);
  border-radius: var(--ck-core-radius);
  cursor: pointer;
  display: inline-flex;
  font: 600 12px/1 var(--ck-core-font-sans);
  justify-content: center;
  letter-spacing: 0.14em;
  padding: var(--ck-core-button-padding-block) var(--ck-core-button-padding-inline);
  text-decoration: none;
  text-transform: uppercase;
}

.ck-core-button--primary {
  background: var(--ck-core-foreground);
  color: var(--ck-core-background);
}

.ck-core-button--secondary {
  background: transparent;
  color: var(--ck-core-foreground);
}

.ck-core-rule {
  background: var(--ck-core-border);
  border: 0;
  height: 1px;
}

@media (min-width: 48rem) {
  :root {
    --ck-core-page-gutter: var(--ck-core-space-6);
    --ck-core-panel-padding: var(--ck-core-space-6);
  }
  .ck-core-display-1 { font-size: 72px; }
  .ck-core-display-2 { font-size: 40px; }
}
