:root {
  --radius: 0.5rem;
  /* Brand */
  --brand-yellow: oklch(0.882 0.18 96);
  --brand-ink: oklch(0.16 0 0); /* #0d0d0d */
  --brand-ash: oklch(0.24 0 0);
  --brand-paper: oklch(1 0 0); /* #ffffff */
  --brand-warm: #f2f2f2; /* Google gray 100 */
  --brand-red: oklch(0.575 0.204 27); /* #d0342c */

  /* Semantic — bright editorial light theme on paper */
  --background: var(--brand-paper);
  --foreground: var(--brand-ink);
  --card: oklch(1 0 0);
  --card-foreground: var(--brand-ink);
  --popover: oklch(1 0 0);
  --popover-foreground: var(--brand-ink);
  --primary: var(--brand-ink);
  --primary-foreground: var(--brand-yellow);
  --secondary: var(--brand-yellow);
  --secondary-foreground: var(--brand-ink);
  --muted: oklch(0.94 0.005 90);
  --muted-foreground: oklch(0.45 0.01 90);
  --accent: var(--brand-yellow);
  --accent-foreground: var(--brand-ink);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0 0);
  --border: oklch(0.88 0.01 90);
  --input: oklch(0.88 0.01 90);
  --ring: var(--brand-ink);
}

.dark {
  --background: var(--brand-ink);
  --foreground: var(--brand-paper);
  --card: var(--brand-ash);
  --card-foreground: var(--brand-paper);
  --popover: var(--brand-ash);
  --popover-foreground: var(--brand-paper);
  --primary: var(--brand-yellow);
  --primary-foreground: var(--brand-ink);
  --secondary: var(--brand-ash);
  --secondary-foreground: var(--brand-paper);
  --muted: oklch(0.24 0 0);
  --muted-foreground: oklch(0.7 0.01 90);
  --accent: var(--brand-yellow);
  --accent-foreground: var(--brand-ink);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 15%);
  --ring: var(--brand-yellow);
}

@layer base {
  * {
    border-color: var(--color-border);
  }
  html {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
  /* Sticky header offset so #anchors don't hide under the top bar */
  section[id],
  a[id] {
    scroll-margin-top: 6rem;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-display {
    font-family: var(--font-display);
  }
  .font-body {
    font-family: var(--font-body);
  }
}

@keyframes solcom-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.solcom-fade {
  animation: solcom-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes solcom-line-rise {
  from {
    opacity: 0;
    transform: translateY(110%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.solcom-line-mask {
  display: block;
  overflow: hidden;
  padding-top: 0.18em;
  padding-bottom: 0.12em;
}
.solcom-line-inner {
  display: inline-block;
  animation: solcom-line-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes solcom-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.solcom-spin {
  animation: solcom-spin 24s linear infinite;
}

/* Faint editorial grid (Paper & Ink) */
.solcom-grid {
  background-image:
    linear-gradient(
      to right,
      color-mix(in oklab, var(--brand-ink) 8%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--brand-ink) 8%, transparent) 1px,
      transparent 1px
    );
  background-size: 88px 88px;
}
@media (min-width: 1024px) {
  .solcom-grid {
    background-size: 112px 112px;
  }
}

/* Outlined display text — red stroke, no fill */
.solcom-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--brand-red);
  text-stroke: 2px var(--brand-red);
  paint-order: stroke fill;
}
@media (min-width: 1024px) {
  .solcom-outline {
    -webkit-text-stroke-width: 3px;
    text-stroke-width: 3px;
  }
}

@keyframes solcom-scroll-hint {
  0% {
    transform: translateY(-4px);
    opacity: 0.3;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
  100% {
    transform: translateY(-4px);
    opacity: 0.3;
  }
}
.solcom-scroll-hint {
  animation: solcom-scroll-hint 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .solcom-fade,
  .solcom-line-inner,
  .solcom-spin {
    animation: none !important;
  }
  .solcom-line-mask {
    overflow: visible;
  }
}