/* Vertelmijeens: design tokens.
   Alle waarden staan hier; base.css en components.css verwijzen er alleen naar.
   Vertrekpunt: donkerblauw #0f1b2d en accentgroen #35c4a2 uit de placeholder.
   Bindend: geen serif, geen paars. */

:root {
  /* ---------------------------------------------------------------
     1. Palet
     --------------------------------------------------------------- */

  /* Diepblauw: de basis van het merk */
  --vme-navy-900: #070d17;
  --vme-navy-800: #0f1b2d;
  --vme-navy-700: #16263e;
  --vme-navy-600: #1e3350;
  --vme-navy-500: #2a4467;
  --vme-navy-400: #3d5a80;

  /* Mint: hoofdaccent */
  --vme-mint-700: #157a66;
  --vme-mint-600: #1ea184;
  --vme-mint-500: #35c4a2;
  --vme-mint-400: #5ed6ba;
  --vme-mint-300: #8ce4cf;
  --vme-mint-200: #b6efe1;
  --vme-mint-100: #e0f7f1;

  /* Amber: warme tweede accent, voor speelse vlakken en categorieën */
  --vme-amber-700: #b56a0f;
  --vme-amber-600: #d98218;
  --vme-amber-500: #f5a524;
  --vme-amber-400: #ffbc4d;
  --vme-amber-200: #ffdfa6;
  --vme-amber-100: #fdefd6;

  /* Neutraal grijs met blauwe ondertoon */
  --vme-grey-000: #ffffff;
  --vme-grey-050: #f6f8fb;
  --vme-grey-100: #eaeff5;
  --vme-grey-200: #d8e0ea;
  --vme-grey-300: #bcc7d6;
  --vme-grey-400: #94a3b8;
  --vme-grey-500: #6c7c93;
  --vme-grey-600: #4e5d73;
  --vme-grey-700: #37455a;
  --vme-grey-800: #26313f;

  /* Semantisch. De infokleur is er voor ingetogen gebruik; een gewone
     melding krijgt liever een navy of grijs vlak. */
  --vme-success: #17a074;
  --vme-success-soft: #ddf4ec;
  --vme-success-ink: #0b5e44;
  --vme-danger: #d94452;
  --vme-danger-soft: #fde8ea;
  --vme-danger-line: #f2c4ca;
  --vme-danger-light: #ef8f97;
  --vme-danger-ink: #8d2530;
  --vme-warning: #f5a524;
  --vme-warning-soft: #fdefd6;
  --vme-warning-ink: #8a5406;
  --vme-info: #2b7fc4;
  --vme-info-soft: #e3effa;
  --vme-info-ink: #1a5183;

  /* ---------------------------------------------------------------
     2. Typografie: systeemfont, geen serif
     --------------------------------------------------------------- */
  --vme-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --vme-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --vme-text-2xs: 0.6875rem;
  --vme-text-xs: 0.75rem;
  --vme-text-sm: 0.875rem;
  --vme-text-md: 1rem;
  --vme-text-lg: 1.125rem;
  --vme-text-xl: 1.3125rem;
  --vme-text-2xl: 1.625rem;
  --vme-text-3xl: 2.125rem;
  --vme-text-display: clamp(2.25rem, 1.55rem + 3.2vw, 3.75rem);

  --vme-weight-regular: 400;
  --vme-weight-medium: 500;
  --vme-weight-semibold: 600;
  --vme-weight-bold: 700;
  --vme-weight-black: 800;

  --vme-leading-tight: 1.15;
  --vme-leading-snug: 1.3;
  --vme-leading-normal: 1.55;
  --vme-leading-loose: 1.7;

  --vme-tracking-tight: -0.02em;
  --vme-tracking-normal: 0;
  --vme-tracking-wide: 0.04em;
  --vme-tracking-code: 0.22em;

  /* ---------------------------------------------------------------
     3. Ruimte: schaal van 4px
     --------------------------------------------------------------- */
  --vme-space-1: 0.25rem;
  --vme-space-2: 0.5rem;
  --vme-space-3: 0.75rem;
  --vme-space-4: 1rem;
  --vme-space-5: 1.5rem;
  --vme-space-6: 2rem;
  --vme-space-7: 3rem;
  --vme-space-8: 4rem;
  --vme-space-9: 6rem;

  /* ---------------------------------------------------------------
     4. Vorm
     --------------------------------------------------------------- */
  --vme-radius-xs: 6px;
  --vme-radius-sm: 10px;
  --vme-radius-md: 14px;
  --vme-radius-lg: 20px;
  --vme-radius-xl: 28px;
  --vme-radius-pill: 999px;

  --vme-border-width: 1px;
  --vme-border-width-thick: 2px;

  /* ---------------------------------------------------------------
     5. Schaduw
     --------------------------------------------------------------- */
  --vme-shadow-sm: 0 1px 2px rgba(7, 13, 23, 0.08), 0 1px 3px rgba(7, 13, 23, 0.05);
  --vme-shadow-md: 0 4px 14px -2px rgba(7, 13, 23, 0.12);
  --vme-shadow-lg: 0 18px 40px -14px rgba(7, 13, 23, 0.35);
  --vme-shadow-xl: 0 30px 70px -24px rgba(7, 13, 23, 0.55);
  --vme-shadow-glow: 0 14px 32px -12px rgba(53, 196, 162, 0.55);
  /* Dikke onderrand: geeft knoppen op leerlingschermen hun fysieke gevoel. */
  --vme-shadow-press: 0 4px 0 0 rgba(7, 13, 23, 0.28);
  --vme-shadow-press-sm: 0 2px 0 0 rgba(7, 13, 23, 0.28);

  /* ---------------------------------------------------------------
     6. Beweging
     --------------------------------------------------------------- */
  --vme-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --vme-ease-in: cubic-bezier(0.5, 0, 0.9, 0.4);
  --vme-ease-bounce: cubic-bezier(0.34, 1.45, 0.5, 1);
  --vme-t-fast: 120ms;
  --vme-t-base: 200ms;
  --vme-t-slow: 340ms;

  /* ---------------------------------------------------------------
     7. Maatvoering
     --------------------------------------------------------------- */
  --vme-container: 68rem;
  --vme-container-narrow: 32rem;
  --vme-container-wide: 82rem;
  --vme-topnav-height: 4rem;
  --vme-tap-target: 3rem; /* 48px, minimum aanraakvlak */
  --vme-focus-width: 3px;

  --vme-z-base: 1;
  --vme-z-sticky: 100;
  --vme-z-overlay: 500;
  --vme-z-toast: 900;

  /* ---------------------------------------------------------------
     8. Rollen: hier wisselt het gevoel per scherm.
        Componenten gebruiken alléén deze rol-tokens, nooit het palet
        rechtstreeks. De leerling- en mentorlayout zetten ze anders.
     --------------------------------------------------------------- */
  --vme-bg: var(--vme-grey-050);
  --vme-bg-image: none;
  --vme-surface: var(--vme-grey-000);
  --vme-surface-raised: var(--vme-grey-000);
  --vme-surface-sunken: var(--vme-grey-100);
  --vme-border: var(--vme-grey-200);
  --vme-border-strong: var(--vme-grey-300);

  --vme-text: var(--vme-navy-800);
  --vme-text-muted: var(--vme-grey-500);
  --vme-text-inverse: var(--vme-grey-000);

  --vme-accent: var(--vme-mint-600);
  --vme-accent-hover: var(--vme-mint-700);
  --vme-accent-contrast: var(--vme-navy-900);
  --vme-accent-soft: var(--vme-mint-100);

  --vme-accent-warm: var(--vme-amber-500);
  --vme-accent-warm-contrast: var(--vme-navy-900);

  --vme-focus-ring: var(--vme-mint-500);
  --vme-link: var(--vme-mint-700);

  --vme-btn-radius: var(--vme-radius-sm);
  --vme-btn-height: 2.75rem;
  --vme-btn-lift: 0;
  --vme-card-radius: var(--vme-radius-md);
  --vme-card-shadow: var(--vme-shadow-sm);

  /* Knoprollen: de primaire knop is bewust anders per scherm. */
  --vme-btn-primary-bg: var(--vme-navy-800);
  --vme-btn-primary-bg-hover: var(--vme-navy-700);
  --vme-btn-primary-fg: var(--vme-grey-000);
  --vme-btn-warm-bg: var(--vme-amber-500);
  --vme-btn-warm-bg-hover: var(--vme-amber-400);
  --vme-btn-warm-fg: var(--vme-navy-900);
}

/* Leerling- en bordschermen: donker, levendig, grote vormen. */
[data-shell="student"] {
  --vme-bg: var(--vme-navy-800);
  --vme-bg-image:
    radial-gradient(60rem 40rem at 12% -10%, rgba(53, 196, 162, 0.22), transparent 60%),
    radial-gradient(45rem 35rem at 92% 8%, rgba(245, 165, 36, 0.16), transparent 62%),
    radial-gradient(50rem 45rem at 50% 115%, rgba(30, 161, 132, 0.16), transparent 65%);
  --vme-surface: rgba(255, 255, 255, 0.06);
  --vme-surface-raised: var(--vme-navy-700);
  --vme-surface-sunken: rgba(7, 13, 23, 0.35);
  --vme-border: rgba(255, 255, 255, 0.14);
  --vme-border-strong: rgba(255, 255, 255, 0.28);

  --vme-text: #f2f6fb;
  --vme-text-muted: #a9b8cc;
  --vme-text-inverse: var(--vme-navy-900);

  --vme-accent: var(--vme-mint-500);
  --vme-accent-hover: var(--vme-mint-400);
  --vme-accent-contrast: var(--vme-navy-900);
  --vme-accent-soft: rgba(53, 196, 162, 0.16);

  --vme-focus-ring: var(--vme-mint-400);
  --vme-link: var(--vme-mint-400);

  --vme-btn-radius: var(--vme-radius-lg);
  --vme-btn-height: 3.5rem;
  --vme-btn-lift: 1; /* zet de dikke onderrand en het duw-effect aan */
  --vme-card-radius: var(--vme-radius-lg);
  --vme-card-shadow: var(--vme-shadow-lg);

  --vme-btn-primary-bg: var(--vme-mint-500);
  --vme-btn-primary-bg-hover: var(--vme-mint-400);
  --vme-btn-primary-fg: var(--vme-navy-900);
}

/* Mentormodule: licht, rustig, compacter. */
[data-shell="mentor"] {
  --vme-bg: var(--vme-grey-050);
  --vme-bg-image: none;
  --vme-surface: var(--vme-grey-000);
  --vme-surface-raised: var(--vme-grey-000);
  --vme-surface-sunken: var(--vme-grey-100);
  --vme-border: var(--vme-grey-200);
  --vme-border-strong: var(--vme-grey-300);

  --vme-text: var(--vme-navy-800);
  --vme-text-muted: var(--vme-grey-500);

  --vme-accent: var(--vme-mint-600);
  --vme-accent-hover: var(--vme-mint-700);
  --vme-accent-contrast: var(--vme-grey-000);
  --vme-accent-soft: var(--vme-mint-100);

  --vme-focus-ring: var(--vme-mint-600);
  --vme-link: var(--vme-mint-700);

  --vme-btn-radius: var(--vme-radius-sm);
  --vme-btn-height: 2.625rem;
  --vme-btn-lift: 0;
  --vme-card-radius: var(--vme-radius-md);
  --vme-card-shadow: var(--vme-shadow-sm);

  --vme-btn-primary-bg: var(--vme-navy-800);
  --vme-btn-primary-bg-hover: var(--vme-navy-700);
  --vme-btn-primary-fg: var(--vme-grey-000);
}