:root {
  /* Primitives */
  --color-green-900: #16211b;
  --color-green-800: #1e2b23;
  --color-green-700: #2a3b30;
  --color-green-600: #3d5343;
  --color-olive-500: #8a8b4e;
  --color-olive-400: #a9ae7c;
  --color-sage-300: #c4c8a4;
  --color-bone-200: #e5e3d4;
  --color-bone-100: #f0eee2;
  --color-bone-000: #f7f6ee;

  /* Semantic colors */
  --color-bg-base: var(--color-bone-100);
  --color-bg-subtle: var(--color-bone-200);
  --color-bg-raised: var(--color-bone-000);
  --color-bg-inverse: var(--color-green-800);
  --color-bg-panel: var(--color-olive-400);
  --color-fg-default: var(--color-green-900);
  --color-fg-muted: var(--color-green-700);
  --color-fg-placeholder: var(--color-green-600);
  --color-fg-inverse: var(--color-bone-100);
  --color-fg-accent: var(--color-olive-500);
  --color-fg-disabled: var(--color-green-600);
  --color-border-default: var(--color-green-800);
  --color-border-subtle: var(--color-green-600);
  --color-border-on-panel: var(--color-green-900);
  --color-action-solid: var(--color-green-800);
  --color-action-solid-text: var(--color-bone-100);
  --color-action-hover: var(--color-green-900);
  --color-scrim: rgba(22, 33, 27, 0.7);
  --color-nav-tint: rgba(30, 43, 35, 0.45);
  --color-nav-tint-strong: rgba(30, 43, 35, 0.72);

  /* Feedback */
  --color-feedback-info: var(--color-green-700);
  --color-feedback-success: var(--color-olive-500);
  --color-feedback-notice: var(--color-olive-400);
  --color-feedback-danger: var(--color-green-900);

  /* Typography families */
  --font-display: "Porca", "Arial Narrow", sans-serif;
  --font-mono: "Anonymous Pro", "IBM Plex Mono", monospace;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Font sizes */
  --font-size-display-xl: 5rem;
  --font-size-display-lg: 3.75rem;
  --font-size-display-md: 2.5rem;
  --font-size-heading: 1.75rem;
  --font-size-body: 1rem;
  --font-size-label: 0.8125rem;
  --font-size-caption: 0.6875rem;

  /* Leading */
  --leading-tight: 1;
  --leading-snug: 1.15;
  --leading-normal: 1.5;

  /* Tracking */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-mono: 0.06em;
  --tracking-label: 0.12em;

  /* Spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 192px;

  /* Sizing */
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 56px;
  --size-badge-height: 24px;
  --size-nav-height: 80px;
  --size-tile-cell: 120px;
  --size-modal-sm: 480px;
  --size-modal-md: 640px;
  --size-modal-lg: 800px;

  /* Layout */
  --grid-columns: 12;
  --grid-gutter: var(--space-4);
  --grid-max-width: 1280px;
  --grid-margin: var(--space-8);
  --density-browse-gap: var(--space-2);
  --density-section-pad: var(--space-7);

  /* Radius */
  --radius-none: 0;
  --radius-default: 0;

  /* Borders */
  --border-width-hairline: 1px;
  --border-width-default: 2px;
  --border-width-bold: 4px;

  /* Shadows */
  --shadow-none: none;

  /* Z-index */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 210;
  --z-toast: 300;

  /* Motion */
  --motion-duration-instant: 80ms;
  --motion-duration-fast: 150ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 400ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-linear: linear;
  --motion-transition-hover: var(--motion-duration-fast) var(--motion-easing-standard);
  --motion-transition-panel: var(--motion-duration-base) var(--motion-easing-standard);

  /* Breakpoints (for reference in media queries) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (max-width: 767px) {
  :root {
    --grid-margin: var(--space-4);
  }
}