/* StreamPilot — base.css: tokens, reset, typografie, utilities, a11y */
/* =======================================================================
   StreamPilot — app.css (mobile-first, clean & consistent)
   Indeling: Tokens / Base / Layout / Topbar / Topnav / Sidebar / Components / Pages / Utilities
   ======================================================================= */

/* Self-hosted fonts */
@font-face {
  font-family: 'Minecraft';
  src: url('fonts/minecraft.woff2') format('woff2'),
       url('fonts/minecraft.ttf')   format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =======================================================================
   1) TOKENS
   ======================================================================= */
:root{
  --bg: #0a0a0c;
  --panel: rgba(255,255,255,.055);
  --panel2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.09);

  --text: #FFFFFF;
  --muted: #DADADB;

  --accent: #FD641E;
  --accent2: #FD834B;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --radius2: 22px;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* Module color palette */
  --color-blue:   #3b82f6;
  --color-purple: #a855f7;
  --color-green:  #22c55e;
  --color-yellow: #eab308;
  --color-teal:   #14b8a6;
  --color-pink:   #ec4899;
  --color-indigo: #6366f1;

  /* layout */
  --container: 1180px;

  /* nav sizing */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 64px;

  /* sticky heights */
  --topbar-h: 68px;
  --topnav-h: 56px;

  /* spacing */
  --pad-x: 16px;
  --pad-y: 14px;

  /* stacking + a11y + safe area */
  --z-topbar: 50;
  --z-topnav: 40;
  --z-sidebar: 30;

  --focus: 0 0 0 3px rgba(253,100,30,.22);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ─── Type scale ──────────────────────────────────────────────────────────
     Gebaseerd op 1rem = 16px (browser default).
     Overlays gebruiken bewust px — deze schaal geldt voor dashboard + publiek.
     ──────────────────────────────────────────────────────────────────────── */
  --text-2xs:  0.625rem;    /* 10px — badges, micro-labels          */
  --text-xs:   0.75rem;     /* 12px — meta, timestamps, hulptekst   */
  --text-sm:   0.8125rem;   /* 13px — body copy (huidig standaard)  */
  --text-base: 0.9375rem;   /* 15px — iets ruimere body copy        */
  --text-lg:   1.0625rem;   /* 17px — subkoppen, kaartstitels       */
  --text-xl:   1.125rem;    /* 18px — sectieteikst                  */
  --text-2xl:  1.375rem;    /* 22px — h2 mobiel                     */
  --text-3xl:  clamp(1.375rem, 1rem + 2vw,   1.625rem); /* 22→26px h2 */
  --text-4xl:  clamp(1.75rem,  1.2rem + 2.5vw, 2.125rem); /* 28→34px h1 */

  /* ─── Font weights ────────────────────────────────────────────────────── */
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ─── Line heights ────────────────────────────────────────────────────── */
  --lh-none:    1;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ─── Letter spacing ──────────────────────────────────────────────────── */
  --ls-tighter: -0.04em;
  --ls-tight:   -0.025em;
  --ls-snug:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.02em;

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

  /* ─── Tekstkleuren (semantisch) ───────────────────────────────────────── */
  --text-primary:  #FFFFFF;            /* = huidige --text               */
  --text-secondary: #DADADB;           /* = huidige --muted              */
  --text-dim:      rgba(255,255,255,.65);
  --text-dimmer:   rgba(255,255,255,.45);
  --text-faint:    rgba(255,255,255,.28);
  --text-accent:   #FD641E;            /* = huidige --accent             */

  /* ─── Status kleuren (semantisch, los van module-kleuren) ─────────────── */
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-danger:  #ef4444;
  --color-info:    #3b82f6;

  /* ─── Card-dichtheid ─────────────────────────────────────────────────────
     Wordt gezet via data-density="3|4|5|6" op <body> (server-side + JS).
     3 = ruim  |  4 = standaard (default)  |  5 = comfortabel  |  6 = compact
     ──────────────────────────────────────────────────────────────────────── */
  --dashboard-cols: 4;
  --card-pad:       1rem;            /* 16px  */
  --card-gap:       0.875rem;        /* 14px  */
  --card-title:     var(--text-sm);  /* 13px  */
  --card-desc:      var(--text-xs);  /* 12px  */
}

/* =======================================================================
   2) BASE
   ======================================================================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1400px 800px at 10% 0%,  rgba(253,100,30,.16),  transparent 55%),
    radial-gradient(1000px 600px at 90% 5%,  rgba(253,131,75,.11),  transparent 60%),
    radial-gradient(900px  700px at 82% 35%, rgba(124,58,237,.10),  transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0 0 10px 0; font-family: var(--font); line-height: 1.15; }
h1{ font-size: var(--text-4xl); font-weight: 900; letter-spacing: -.04em; }
h2{ font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.6px; }
h3{ font-size: var(--text-lg);  font-weight: 700; letter-spacing: -.2px; }
p{ margin:0 0 12px 0; line-height:1.5; }

img, svg{ max-width:100%; height:auto; }

/* Icons */
.ico{
  width: 18px;
  height: 18px;
  display:block;
}
.ico use{ pointer-events:none; }

/* Filled/outline toggle: .ico--fi hidden by default, swaps in on .is-active */
.ico--fi { display: none; }
.nav__item.is-active .ico--ol { display: none; }
.nav__item.is-active .ico--fi { display: block; }


/* =======================================================================
   9) UTILITIES
   ======================================================================= */
.small{ font-size: var(--text-xs); }
.muted{ color: var(--muted); }

/* ── Card typografie systeem ──────────────────────────────────────────────── */
/* Intro/beschrijving boven een card-sectie */
.card-desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 12px;
}
.card-desc:last-child { margin-bottom: 0; }

/* Helptext onder een formulierveld */
.form-hint {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: rgba(255,255,255,.38);
  margin-top: 4px;
}

/* Tussentitel binnen een card (bv. "Stijl", "Instellingen") */
.card-section-heading {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.35);
  margin: 16px 0 8px;
}
.card-section-heading:first-child { margin-top: 0; }

/* Formulierlabel — werkt ook buiten .form-group */
.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,.75);
  display: block;
  margin-bottom: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =======================================================================
   A11Y: focus-visible
   ======================================================================= */
:where(a, button, input, summary, .btn, .icon-btn, .nav__item, .nav__groupSummary, .topnav__item, .topnav__subitem):focus{
  outline: none;
}
:where(a, button, input, summary, .btn, .icon-btn, .nav__item, .nav__groupSummary, .topnav__item, .topnav__subitem):focus-visible{
  box-shadow: var(--focus);
  border-color: rgba(253,100,30,.55);
}