@layer base {
  :root {
    /* Spacing */
    --space-xs: 0.2rem;
    --space-sm: 0.4rem;
    --space-md: 0.6rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;

    /* Font sizes */
    --text-xs: 0.7rem;
    --text-sm: 0.75rem;
    --text-base: 0.85rem;
    --text-md: 0.9rem;
    --text-lg: 1rem;
    --text-xl: 1.1rem;
    --text-2xl: 1.2rem;
    --text-3xl: 1.5rem;
    --text-4xl: 1.8rem;

    /* Colors: Ink */
    --color-ink: #333;
    --color-ink-light: #555;
    --color-ink-lighter: #666;
    --color-ink-lightest: #888;

    /* Colors: Canvas */
    --color-canvas: #fff;
    --color-canvas-alt: #f5f5f5;
    --color-canvas-hover: #f0f7ff;
    --color-canvas-alt-hover: #e5e5e5;

    /* Colors: Border */
    --color-border: #ddd;
    --color-border-light: #e0e0e0;
    --color-border-input: #ccc;

    /* Colors: Brand */
    --color-primary: #0066cc;
    --color-primary-dark: #0055aa;

    /* Colors: Semantic */
    --color-negative: #c00;
    --color-positive: #2e7d32;
    --color-warning: #e65100;

    /* Colors: Backgrounds */
    --color-bg-negative: #fee;
    --color-bg-positive: #e8f5e9;
    --color-bg-warning: #fff3e0;
    --color-bg-info: #e8f4fd;
    --color-bg-purple: #f3e5f5;
    --color-bg-alt: #fafafa;

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

    /* Shadows */
    --shadow-focus: 0 0 0 2px rgba(0, 102, 204, 0.2);

    /* Dev-only */
    --color-dev-border: #ce93d8;
  }

  /* Dev-only indicator
  /* ------------------------------------------------------------------------ */

  .dev-only {
    background-color: var(--color-bg-purple);
    border: 1px dashed var(--color-dev-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-xl);
  }
}