/* ═══════════════════════════════════════════════════════════════════════
   tokens.css — v2 (Fase 4) — SINGLE SOURCE OF TRUTH
   InteraxPro Creator — The Hive · Gisou

   Drie lagen:
     1. PRIMITIVES   merk-onafhankelijke schalen (kleur, maat, type, motion)
     2. SEMANTIC     waar de UI uit put (surface, border, text, interactive)
     3. COMPONENT    alleen waar een component écht een eigen knop nodig heeft

   Backwards compatible: ALLE v1-tokennamen (--honey, --dark, --border, …)
   blijven bestaan als aliassen naar de nieuwe lagen. Bestaande CSS en
   JS-template-strings blijven dus werken zonder wijziging.

   Geladen door: admin, dashboard, community ÉN alle publieke pagina's
   (login, apply, home, invite, forgot/update-password, qrcode, terms,
   privacy, update). De inline :root-duplicaten in die pagina's vervallen.

   Vanilla CSS custom properties. Geen build-step. Frappe v16-compatibel.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── 1. PRIMITIVES ──────────────────────────────────────────────── */

    /* Honey ramp (★ = bestaande merkkleur, ongewijzigd) */
    --g-honey-50:  #FFFBF0;
    --g-honey-100: #FFF1CF;   /* ★ honey-light */
    --g-honey-200: #FDE9AE;
    --g-honey-300: #FBDE7D;   /* ★ honey */
    --g-honey-400: #E9C465;
    --g-honey-500: #D4A853;   /* ★ honey-dark */
    --g-honey-600: #B68A3E;
    --g-honey-700: #8F6A2E;
    --g-honey-800: #6B4D20;

    /* Brown (merk-donker) */
    --g-brown-700: #6B3A1A;
    --g-brown-800: #53260C;   /* ★ dark */
    --g-brown-900: #3E1C09;

    /* Sand (warme neutralen — cream t/m tekst) */
    --g-sand-50:  #FDFBF6;
    --g-sand-100: #F8F5EE;    /* ★ cream */
    --g-sand-200: #EFEAE0;
    --g-sand-300: #E0D9CB;
    --g-sand-400: #C9C2B6;
    --g-sand-500: #A39B8F;
    --g-sand-600: #736D64;    /* ★ text-muted (AA op wit én cream) */
    --g-sand-700: #4A453E;
    --g-sand-900: #2D2A26;    /* ★ text */

    /* Gray scale (Tailwind-compatibel — behouden voor bestaande JS/CSS) */
    --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB;
    --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280;
    --gray-600: #4B5563; --gray-700: #374151;

    /* Maatschaal (4px-basis) */
    --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px;  --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-30: 120px;

    /* Radius (bestaande schaal, ongewijzigd) */
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
    --radius-xl: 24px; --radius-full: 100px;

    /* Schaduwen — warm getint: rgba(83,38,12,…) i.p.v. rgba(0,0,0,…) */
    --shadow-xs: 0 1px 3px rgba(83,38,12,0.05);
    --shadow-sm: 0 2px 8px rgba(83,38,12,0.07);
    --shadow-md: 0 4px 12px rgba(83,38,12,0.09);
    --shadow-lg: 0 8px 24px rgba(83,38,12,0.13);
    --shadow-xl: 0 20px 60px rgba(83,38,12,0.16);
    --shadow-modal: 0 24px 64px rgba(45,42,38,0.3);

    /* Typografie */
    --font-ui: 'Montserrat', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --text-xs: 11px;   --text-sm: 13.5px; --text-md: 16px;
    --text-lg: 18px;   --text-xl: 21px;   --text-2xl: 28px;
    --text-3xl: 34px;  --text-display: clamp(42px, 9vw, 82px);
    --leading-tight: 1.15; --leading-normal: 1.45; --leading-relaxed: 1.65;
    --tracking-label: 0.12em;   /* uppercase labels/eyebrows */
    --tracking-cta: 0.1em;      /* uppercase buttons */
    /* Headings: Montserrat italic uppercase, gewicht 600; accentwoord 700
       in --g-brown-800 (massief — géén gradient, géén serif). */
    --heading-weight: 600;
    --heading-accent-weight: 700;
    --heading-accent-color: var(--g-brown-800);

    /* Motion */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-pop: cubic-bezier(0.34, 1.3, 0.64, 1);
    --transition-fast: 0.15s var(--ease-standard);
    --transition-normal: 0.2s var(--ease-standard);
    --transition-slow: 0.3s var(--ease-standard);

    /* Z-index (bestaande schaal — geen nieuwe magic numbers) */
    --z-header: 50; --z-sticky: 100; --z-sidebar: 200;
    --z-sidebar-overlay: 300; --z-dropdown: 400;
    --z-modal-backdrop: 900; --z-modal: 1000; --z-toast: 11000;

    /* ── 2. SEMANTIC ────────────────────────────────────────────────── */

    --surface-page: var(--g-sand-100);          /* cream basis */
    --surface-card: #FFFFFF;
    --surface-raised: var(--g-sand-50);         /* zachte cream binnen kaarten */
    --surface-accent-subtle: var(--g-honey-50); /* highlights, selected rows */
    --surface-accent: var(--g-honey-100);
    --surface-inverse: var(--g-brown-800);      /* donkere vlakken (admin-sidebar, footer) */

    --border-subtle: rgba(83,38,12,0.08);       /* warm i.p.v. zwart-grijs */
    --border-default: rgba(83,38,12,0.12);
    --border-strong: rgba(83,38,12,0.18);
    --border-input: var(--g-sand-300);
    --border-focus: var(--g-honey-500);

    --text-primary: var(--g-sand-900);
    --text-secondary: var(--g-sand-700);
    --text-muted-2: var(--g-sand-600);          /* alias-vrij semantisch muted */
    --text-faint: var(--g-sand-500);            /* alléén ≥600 gewicht of decoratief */
    --text-brand: var(--g-brown-800);
    --text-accent: var(--g-honey-600);          /* eyebrows, links op cream */
    --text-inverse: #FFF8E7;
    --text-inverse-muted: rgba(255,241,207,0.7);

    --interactive-primary-bg: var(--g-honey-300);
    --interactive-primary-fg: var(--g-brown-800);
    --interactive-primary-hover: var(--g-honey-500);
    --interactive-hover-tint: var(--g-honey-100);

    --focus-ring: 0 0 0 3px rgba(251, 222, 125, 0.25);
    --focus-ring-field: 0 0 0 4px rgba(212, 168, 83, 0.12);
    --backdrop: rgba(45,42,38,0.5);

    /* Feedback — altijd bg+fg paren gebruiken (AA-gecontroleerd) */
    --feedback-success-bg: #D1FAE5; --feedback-success-fg: #065F46;
    --feedback-success: #10B981;
    --feedback-warning-bg: #FEF3C7; --feedback-warning-fg: #92400E;
    --feedback-warning: #F59E0B;
    --feedback-error-bg: #FEE2E2;   --feedback-error-fg: #991B1B;
    --feedback-error: #A0293E;
    --feedback-info-bg: #DBEAFE;    --feedback-info-fg: #1E40AF;
    --feedback-info: #3B82F6;
    --feedback-neutral-bg: #F3F4F6; --feedback-neutral-fg: #4B5563;

    /* ── 3. COMPONENT ───────────────────────────────────────────────── */

    /* Buttons: pill voor acties; uppercase; tracking --tracking-cta */
    --btn-radius: var(--radius-full);
    --btn-padding: 13px 26px;
    --btn-padding-sm: 9px 18px;
    --btn-font-size: 12px;
    --btn-weight: 700;

    /* Velden */
    --field-border-width: 1.5px;
    --field-radius: var(--radius-md);
    --field-padding: 13px 16px;
    --field-bg: #FFFFFF;

    /* Cards */
    --card-bg: #FFFFFF;
    --card-radius: 14px;
    --card-radius-lg: 18px;
    --card-border: 1px solid var(--border-subtle);

    /* Badges (status met dot) */
    --badge-radius: var(--radius-full);
    --badge-padding: 5px 12px;
    --badge-font-size: 11px;

    /* Modals */
    --modal-radius: 22px;
    --modal-shadow: var(--shadow-modal);

    /* Tabellen */
    --table-row-pad: 14px;          /* comfortable */
    --table-row-pad-compact: 7px;   /* compact-density toggle */
    --table-header-bg: var(--g-sand-50);

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;

    /* ── v1 BACKWARDS-COMPAT ALIASSEN — NIET VERWIJDEREN ────────────────
       Bestaande CSS + JS-template-strings verwijzen hiernaar. */
    --honey: var(--g-honey-300);
    --honey-light: var(--g-honey-100);
    --honey-dark: var(--g-honey-500);
    --dark: var(--g-brown-800);
    --cream: var(--g-sand-100);
    --bg-light: #FFFFFF;
    --border: var(--border-subtle);
    --text: var(--g-sand-900);
    --text-muted: var(--g-sand-600);
    --success: var(--feedback-success);
    --success-light: var(--feedback-success-bg);
    --warning: var(--feedback-warning);
    --error: var(--feedback-error);
    --info: var(--feedback-info);
}

/* ── Keyboard focus (a11y-vloer — BEHOUDEN, zie briefing §3) ──────────
   Expliciete selectors + !important zijn bewust: Frappe's base-CSS levert
   a:focus{outline:none} met specificiteit (0,1,1); een zero-specificity
   :where()-ring verliest daarvan. */
a:focus-visible,
button:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--g-honey-500, #D4A853) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* ── Checkbox / radio accent over alle surfaces ───────────────────── */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--g-honey-500, #D4A853);
}

/* ── Smooth in-page scrolling ─────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Verfijnde scrollbars — premium feel, geen layout shift ───────── */
* { scrollbar-width: thin; scrollbar-color: rgba(212,168,83,0.55) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(212,168,83,0.5);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(212,168,83,0.85);
    background-clip: content-box;
}

/* ── Reduced motion (ook smooth scroll uit) ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}