/* Christian Design System — primitive → semantic → component */
:root {
  /* Primitive: color */
  --primitive-black: #050505;
  --primitive-black-soft: #111111;
  --primitive-ivory: #ffffff;
  --primitive-paper: #f7f7f5;
  --primitive-gray-100: #ededeb;
  --primitive-gray-300: #b8b8b4;
  --primitive-gray-600: #555550;
  --primitive-danger: #e4483f;

  /* Primitive: spacing — 4px base */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Primitive: type */
  --font-display: "Space Grotesk", Arial, sans-serif;
  --font-body: "Space Grotesk", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --text-xs: .6875rem;
  --text-sm: .8125rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
  --text-display: clamp(4rem, 9.4vw, 10.5rem);

  /* Primitive: geometry and motion */
  --radius-none: 0;
  --radius-sm: .75rem;
  --radius-pill: 999px;
  --line-thin: 1px;
  --line-bold: 2px;
  --shadow-hard-sm: 0 0 0 1px var(--primitive-black);
  --shadow-hard-lg: 0 0 0 1px var(--primitive-black);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);

  /* Semantic */
  --color-background: var(--primitive-ivory);
  --color-surface: var(--primitive-paper);
  --color-surface-inverse: var(--primitive-black);
  --color-foreground: var(--primitive-black);
  --color-foreground-inverse: var(--primitive-paper);
  --color-muted: var(--primitive-gray-600);
  --color-border: var(--primitive-black);
  --color-border-subtle: var(--primitive-gray-300);
  --color-accent: var(--primitive-black);
  --color-on-accent: var(--primitive-paper);
  --color-danger: var(--primitive-danger);
  --color-focus: var(--primitive-black);
  --spacing-page: clamp(1rem, 4vw, 4.5rem);
  --spacing-section: clamp(5rem, 10vw, 9rem);
  --content-max: 100rem;

  /* Component */
  --nav-height: 5rem;
  --button-bg: var(--color-foreground);
  --button-fg: var(--color-foreground-inverse);
  --button-bg-hover: var(--color-accent);
  --button-fg-hover: var(--color-on-accent);
  --button-border: var(--color-border);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-shadow: var(--shadow-hard-lg);
  --tag-bg: transparent;
  --tag-border: var(--color-border);
  --focus-ring: 3px solid var(--color-focus);
}

/* Inverted theme — semantic remapping, primitives remain unchanged */
:root {
  color-scheme: dark;
  --color-background: var(--primitive-black);
  --color-surface: var(--primitive-black-soft);
  --color-surface-inverse: var(--primitive-paper);
  --color-foreground: var(--primitive-paper);
  --color-foreground-inverse: var(--primitive-black);
  --color-muted: var(--primitive-gray-300);
  --color-muted-inverse: var(--primitive-gray-600);
  --color-border: var(--primitive-paper);
  --color-border-subtle: var(--primitive-gray-600);
  --color-border-inverse: var(--primitive-black);
  --color-accent: var(--primitive-paper);
  --color-on-accent: var(--primitive-black);
  --color-focus: var(--primitive-paper);
  --shadow-hard-sm: 0 0 0 1px var(--color-border);
  --shadow-hard-lg: 0 0 0 1px var(--color-border);
}