:root {
  color-scheme: dark;
  /* Typography */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-hero: clamp(2.5rem, 6vw, 4.5rem);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;

  /* Colors — dark (default) */
  --color-bg:          #0f0f0f;
  --color-surface:     #1a1a1a;
  --color-border:      #2e2e2e;
  --color-text:        #f0f0ee;
  --color-text-muted:  #888882;
  --color-text-faint:  #85857f;
  --color-accent:      #f0f0ee;
  --color-white:       #ffffff;
}

/* Light theme override */
[data-theme="light"] {
  color-scheme: light;
  --color-bg:          #ffffff;
  --color-surface:     #f7f7f6;
  --color-border:      #e8e8e6;
  --color-text:        #111111;
  --color-text-muted:  #6f6f68;
  --color-text-faint:  #74746e;
  --color-accent:      #111111;
}

:root {

  /* Project accent colors (used in case pages) */
  --color-loopt:     #1a1a1a;
  --color-leap:      #2d1b4e;
  --color-fyn:       #1a3a2a;
  --color-smartyard: #0a2a4a;
  --color-bonde:     #1a1200;

  /* Spacing (8px base grid) */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Layout */
  --max-width:      1200px;
  --max-width-text: 680px;
  --gutter:         clamp(1.25rem, 5vw, 3rem);

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-mid:  400ms;
  --duration-slow: 600ms;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}