:root {
    /* ---------------------------------------------------------------------
     * Primitives — valores brutos extraídos das specs do Figma (MD).
     * Não usar diretamente nos componentes; consumir via tokens semânticos.
     * ------------------------------------------------------------------ */
    --neutral-0: #ffffff;
    --neutral-50: #fafafa;
    --neutral-200: #e5e5e5;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;

    --blue-50: #f9fcff;
    --blue-100: #dbeafe;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;

    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-300: #fca5a5;
    --red-500: #ef4444;
    --red-600: #dc2626;

    --amber-600: #d97706;

    --slate-100: #f1f5f9;

    --green-100: #dcfce7;
    --green-600: #16a34a;

    /* ---------------------------------------------------------------------
     * Cores semânticas
     * ------------------------------------------------------------------ */
    --color-bg-canvas: var(--neutral-50);
    --color-bg-surface: var(--neutral-0);
    --color-bg-info-subtle: var(--blue-100);
    --color-bg-info-faint: var(--blue-50);
    --color-bg-neutral-subtle: var(--slate-100);
    --color-bg-danger-subtle: var(--red-100);
    --color-bg-danger-faint: var(--red-50);
    --color-bg-success-subtle: var(--green-100);

    --color-border-default: var(--neutral-200);
    --color-border-danger: var(--red-600);
    --color-border-danger-subtle: var(--red-300);

    --color-brand-primary: var(--blue-600);
    --color-brand-primary-hover: var(--blue-700);
    --color-brand-primary-active: var(--blue-800);
    --color-brand-primary-ring: rgba(37, 99, 235, 0.18);
    --color-brand-primary-ghost-hover: rgba(37, 99, 235, 0.08);
    --color-danger-ring: rgba(220, 38, 38, 0.16);

    --color-text-strong: var(--neutral-950);
    --color-text-primary: var(--neutral-900);
    --color-text-secondary: var(--neutral-600);
    --color-text-helper: var(--neutral-700);
    --color-text-muted: var(--neutral-400);
    --color-text-link: var(--blue-600);
    --color-text-on-brand: var(--neutral-0);
    --color-text-danger: var(--red-600);
    --color-text-warning: var(--amber-600);
    --color-text-caption: var(--neutral-500);
    --color-feedback-success: var(--green-600);
    --color-feedback-danger: var(--red-500);

    /* ---------------------------------------------------------------------
     * Tipografia
     * ------------------------------------------------------------------ */
    --font-family-heading: 'Fredoka', system-ui, sans-serif;
    --font-family-body: 'Nunito', system-ui, sans-serif;

    --text-4xs: 0.5rem;    /* 8px */
    --text-3xs: 0.625rem;  /* 10px */
    --text-2xs: 0.6875rem; /* 11px */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-lg: 1.125rem;   /* 18px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.75rem;   /* 28px */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --leading-tight: 1.2;
    --leading-snug: 1.25;
    --leading-normal: 1.4;
    --leading-relaxed: 1.5;
    --leading-loose: 1.55;

    --tracking-tight: -0.005em;
    --tracking-snug: -0.004em;

    /* ---------------------------------------------------------------------
     * Espaçamento — grade base de 4px
     * ------------------------------------------------------------------ */
    --space-1: 0.25rem;     /* 4px */
    --space-1-25: 0.3125rem;/* 5px */
    --space-1-5: 0.375rem;  /* 6px */
    --space-2: 0.5rem;      /* 8px */
    --space-2-5: 0.625rem;  /* 10px */
    --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 */

    /* ---------------------------------------------------------------------
     * Bordas e cantos
     * ------------------------------------------------------------------ */
    --border-width: 1.5px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-pill: 100px;
    --radius-full: 9999px;

    /* ---------------------------------------------------------------------
     * Elevação, opacidade e movimento
     * ------------------------------------------------------------------ */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
    --opacity-disabled: 0.4;
    --transition-fast: 150ms ease;

    /* ---------------------------------------------------------------------
     * Dimensões de controle
     * ------------------------------------------------------------------ */
    --control-height-md: 2.5rem;  /* 40px */
    --control-height-sm: 2rem;    /* 32px */
    --field-height: 2.3125rem;    /* 37px */
}