:root {
  /* Primitive colors */
  --teni-ivory: #fbf9f4;
  --teni-paper: #f3efe7;
  --teni-linen: #ddd2c3;
  --teni-sand: #c5b39f;
  --teni-taupe: #9b8876;
  --teni-graphite: #292826;
  --teni-shadow: #191918;
  --teni-sunlight: #c8a06b;
  --teni-danger: #b24a3b;
  --teni-success: #446b52;

  /* Semantic colors */
  --teni-bg: var(--teni-paper);
  --teni-surface: var(--teni-ivory);
  --teni-surface-quiet: var(--teni-linen);
  --teni-bg-inverse: var(--teni-graphite);
  --teni-text: var(--teni-graphite);
  --teni-text-muted: #6d6258;
  --teni-text-inverse: var(--teni-ivory);
  --teni-border: rgba(41, 40, 38, 0.18);
  --teni-border-strong: var(--teni-graphite);
  --teni-action: var(--teni-graphite);
  --teni-action-hover: var(--teni-shadow);
  --teni-on-action: var(--teni-ivory);
  --teni-focus: var(--teni-sunlight);

  /* Typography */
  --teni-font: "Onest", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --teni-weight-regular: 400;
  --teni-weight-medium: 500;
  --teni-weight-semibold: 600;
  --teni-text-xs: 0.75rem;
  --teni-text-sm: 0.875rem;
  --teni-text-base: 1rem;
  --teni-text-lg: 1.1875rem;
  --teni-text-xl: 1.5rem;
  --teni-text-2xl: 2rem;
  --teni-text-3xl: 2.75rem;
  --teni-text-4xl: 4rem;
  --teni-text-display: clamp(3.5rem, 7vw, 7.5rem);
  --teni-leading-tight: 1;
  --teni-leading-heading: 1.06;
  --teni-leading-body: 1.5;
  --teni-tracking-tight: -0.045em;
  --teni-tracking-caps: 0.14em;

  /* Spacing */
  --teni-space-1: 4px;
  --teni-space-2: 8px;
  --teni-space-3: 12px;
  --teni-space-4: 16px;
  --teni-space-5: 24px;
  --teni-space-6: 32px;
  --teni-space-7: 48px;
  --teni-space-8: 64px;
  --teni-space-9: 80px;
  --teni-space-10: 120px;

  /* Geometry */
  --teni-radius: 2px;
  --teni-grid-max: 1280px;
  --teni-grid-columns: 12;
  --teni-grid-gutter: 24px;
  --teni-page-margin: 80px;
  --teni-light-angle: 25deg;
  --teni-shadow-offset: 12px;

  /* Motion */
  --teni-motion-fast: 180ms;
  --teni-motion-base: 320ms;
  --teni-motion-slow: 640ms;
  --teni-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1023px) {
  :root {
    --teni-grid-columns: 8;
    --teni-grid-gutter: 20px;
    --teni-page-margin: 32px;
  }
}

@media (max-width: 599px) {
  :root {
    --teni-grid-columns: 4;
    --teni-grid-gutter: 16px;
    --teni-page-margin: 20px;
  }
}