/**
 * ValidGraph — Design Tokens
 *
 * Single source of truth for colors, spacing, typography, radii, and shadows.
 * Scoped to all three block roots for white-label support.
 * WCAG AA compliant contrast ratios documented inline.
 */

.vg-root,
.vg-account-root,
.vg-pricing-root,
.vg-header-auth {
    /* ── Colors: Primary ──────────────────────────────────────────── */
    --vg-primary:       #153045;  /* 11.3:1 on white */
    --vg-primary-hover: #0e2233;

    /* ── Colors: Accent ───────────────────────────────────────────── */
    --vg-accent:         #b8862d; /* 3.5:1 on white — AA large text & UI */
    --vg-accent-hover:   #9a7024;
    --vg-accent-on-dark: #eeaa66; /* 3.6:1 on --vg-primary — for dark bg only */

    /* ── Colors: Semantic ─────────────────────────────────────────── */
    --vg-success:       #16a34a;  /* 4.5:1 — AA normal text */
    --vg-success-hover: #15803d;
    --vg-success-light: #f0fdf4;

    --vg-warning:       #d97706;  /* 4.6:1 — AA normal text */
    --vg-warning-light: #fffbeb;

    --vg-danger:        #dc2626;  /* 5.6:1 — AA normal text */
    --vg-danger-hover:  #b91c1c;
    --vg-danger-light:  #fef2f2;

    /* ── Colors: Surfaces ─────────────────────────────────────────── */
    --vg-bg:            #fafafa;
    --vg-surface:       #ffffff;
    --vg-surface-hover: #f3f4f6;

    /* ── Colors: Borders ──────────────────────────────────────────── */
    --vg-border:       #9ca3af;   /* 3.0:1 — AA for UI components */
    --vg-border-light: #d1d5db;

    /* ── Colors: Text ─────────────────────────────────────────────── */
    --vg-text:           #153045; /* 11.3:1 */
    --vg-text-secondary: #475569; /* 7.0:1 */
    --vg-text-muted:     #6b7280; /* 5.0:1 — AA normal text */

    /* ── Colors: Focus ────────────────────────────────────────────── */
    --vg-focus-ring:        #153045; /* 11.3:1 */
    --vg-focus-ring-offset: 2px;

    /* ── Spacing (4px scale) ──────────────────────────────────────── */
    --vg-space-1:  0.25rem;  /*  4px */
    --vg-space-2:  0.5rem;   /*  8px */
    --vg-space-3:  0.75rem;  /* 12px */
    --vg-space-4:  1rem;     /* 16px */
    --vg-space-5:  1.25rem;  /* 20px */
    --vg-space-6:  1.5rem;   /* 24px */
    --vg-space-8:  2rem;     /* 32px */
    --vg-space-10: 2.5rem;   /* 40px */

    /* ── Typography ───────────────────────────────────────────────── */
    --vg-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vg-font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;
    --vg-leading:       1.5;
    --vg-leading-tight: 1.3;

    --vg-text-xs:   0.75rem;    /* 12px */
    --vg-text-sm:   0.8125rem;  /* 13px */
    --vg-text-base: 0.875rem;   /* 14px */
    --vg-text-md:   1rem;       /* 16px */
    --vg-text-lg:   1.125rem;   /* 18px */
    --vg-text-xl:   1.25rem;    /* 20px */
    --vg-text-2xl:  1.5rem;     /* 24px */
    --vg-text-3xl:  2rem;       /* 32px */

    /* ── Border Radius ────────────────────────────────────────────── */
    --vg-radius-sm:   6px;   /* inputs, small buttons */
    --vg-radius:      8px;   /* cards, panels */
    --vg-radius-lg:  12px;   /* main containers, modals */
    --vg-radius-full: 999px; /* pills, badges */

    /* ── Shadows ──────────────────────────────────────────────────── */
    --vg-shadow:    0 1px 3px rgba(21, 48, 69, 0.08), 0 1px 2px rgba(21, 48, 69, 0.06);
    --vg-shadow-md: 0 4px 6px rgba(21, 48, 69, 0.07), 0 2px 4px rgba(21, 48, 69, 0.05);
    --vg-shadow-lg: 0 8px 24px rgba(21, 48, 69, 0.1);

    /* ── Transitions ──────────────────────────────────────────────── */
    --vg-transition: 0.15s ease;
}