/**
 * CollageJS Theme - Base Definitions
 *
 * Fundamental CSS variables that are too small to warrant their own files.
 * This file should ALWAYS be imported first as other modules may depend on these definitions.
 *
 * Contains:
 * - Font family stacks
 * - Other fundamental values that don't fit neatly into color/component/utility categories
 */

/* ===== TYPOGRAPHY ===== */

/* Font family stacks */
[data-collagejs-theme],
.cjs-themed {
  /* Sans-serif font stack - used as default body font */
  --cjs-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                   'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                   sans-serif;

  /* Monospace font stack - used for code and technical content */
  --cjs-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
                   'DejaVu Sans Mono', monospace;
}

/* ===== BORDER RADIUS ===== */

[data-collagejs-theme],
.cjs-themed {
  /* Border radius scale */
  --cjs-radius-sm: 0.25rem;      /* Small elements */
  --cjs-radius: 0.375rem;        /* Default for most components */
  --cjs-radius-lg: 0.5rem;       /* Cards and larger elements */
  --cjs-radius-xl: 0.75rem;      /* Extra large elements */
  --cjs-radius-pill: 9999px;     /* Pill shape (fully rounded ends) */
  --cjs-radius-circle: 50%;      /* Perfect circle (use on square elements) */
}