:root {
    /* ── Typography ── */
    --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: var(--font-family-base);
    --font-family-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

    /* Font sizes - modular scale (1.2 ratio) */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Letter spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;

    /* Heading specific */
    --heading-line-height: 1.3;
    --heading-letter-spacing: -0.02em;

    /* Text colors */
    --text-primary: #1a1a1a;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-light: #a0aec0;

    /* ── Board colors - softer and more elegant ── */
    --board-light-color: #f0d9b5;
    --board-dark-color: #b58863;

    /* Modern highlight with subtle glow effect */
    --board-highlight-color: rgba(155, 199, 0, 0.42);
    --board-highlight-border: rgba(155, 199, 0, 0.8);

    /* Modern arrow colors with gradient support */
    --arrow-color-start: rgba(255, 170, 0, 0.85);
    --arrow-color-end: rgba(255, 100, 0, 0.9);
    --arrow-color: rgba(255, 140, 0, 0.87);

    /* Arrow styling */
    --arrow-stroke-width: 5;
    --arrow-marker-size: 10;

    --piece-white-king: "♔";
    --piece-white-queen: "♕";
    --piece-white-rook: "♖";
    --piece-white-bishop: "♗";
    --piece-white-knight: "♘";
    --piece-white-pawn: "♙";

    --piece-black-king: "♚";
    --piece-black-queen: "♛";
    --piece-black-rook: "♜";
    --piece-black-bishop: "♝";
    --piece-black-knight: "♞";
    --piece-black-pawn: "♟";
}