/*
 * Design tokens — TheGoodCloud account portal.
 *
 * Eén bron voor kleur, spacing, typografie, radius en shadow. Afgeleid uit de
 * mockups (~/Desktop/TGC/account-portal-preview): de Tailwind-config plus de
 * refine.css-overrides, waarbij refine.css de werkelijke waarden bepaalt.
 * Alle portal-componenten verwijzen naar deze custom properties — geen hardcoded
 * waardes in portal.css.
 */
:root {
	/* --- Kleur: basis --- */
	--tgc-color-bg: #ffffff;          /* pagina-achtergrond */
	--tgc-color-surface: #ffffff;     /* cards, sidebar, topbar */
	--tgc-color-surface-alt: #f5f3f3; /* subtiele vlakken */
	--tgc-color-border: #e5e5e5;      /* card-/outline-rand */
	--tgc-color-text: #1b1c1c;        /* hoofdtekst */
	--tgc-color-text-hover: #323333;  /* hover van donkere knoppen (iets lichter zwart) */
	--tgc-color-text-muted: #625f57;  /* gedempte tekst */

	/* --- Kleur: accent / merk --- */
	--tgc-color-primary: #636037;           /* olijf, merkkleur */
	--tgc-color-primary-container: #fff9c4; /* zacht geel */
	--tgc-color-on-primary: #ffffff;

	/* --- Sidebar --- */
	--tgc-color-sidebar-pill: #f4f0e8;   /* actieve/hover achtergrond */
	--tgc-color-sidebar-active: #1f3b12; /* actieve/hover tekst + icoon */

	/* --- Status --- */
	--tgc-color-success: #047857;        /* "Active" tekst */
	--tgc-color-success-bg: #ecfdf5;
	--tgc-color-success-border: #d1fae5;
	--tgc-color-success-dot: #10b981;
	--tgc-color-danger: #ba1a1a;
	--tgc-color-warning: #b45309;
	--tgc-color-warning-bg: #fef3c7;
	--tgc-color-warning-border: #fde68a;
	--tgc-color-warning-dot: #f59e0b;

	/* --- Typografie --- */
	--tgc-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tgc-text-display: 40px; /* lh 1.1, gewicht 600, tracking -0.03em */
	--tgc-text-h2: 32px;
	--tgc-text-h3: 20px;
	--tgc-text-lg: 18px;
	--tgc-text-base: 16px;    /* lh 1.6 */
	--tgc-text-sm: 14px;
	--tgc-text-xs: 12px;
	--tgc-weight-normal: 400;
	--tgc-weight-medium: 500;
	--tgc-weight-bold: 600;   /* "bold" in de mockup = 600 */

	/* --- Spacing (8px-schaal) --- */
	--tgc-space-1: 0.5rem;  /* 8px  */
	--tgc-space-2: 1rem;    /* 16px */
	--tgc-space-3: 1.5rem;  /* 24px — gutter */
	--tgc-space-4: 2rem;    /* 32px */
	--tgc-space-6: 3rem;    /* 48px */

	/* --- Radius & shadow --- */
	--tgc-radius: 0.5rem;       /* knoppen / kleine elementen */
	--tgc-radius-card: 12px;    /* cards */
	--tgc-radius-pill: 9999px;
	--tgc-shadow-card: 0 10px 28px rgba(24, 24, 24, 0.04);

	/* --- Layout --- */
	--tgc-sidebar-width: 19rem;
	--tgc-content-max: 1200px;
}