/* css/main.css
   Verantwoordelijkheid: Design tokens, reset, typografie, body.
   Alles wat component-specifiek is gaat in css/components/.
   ─────────────────────────────────────────────────────────── */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Kleuren — neutral palette */
  --color-bg:           #0f1117;
  --color-surface:      #1a1d27;
  --color-surface-alt:  #22263a;
  --color-border:       #2e3248;
  --color-border-focus: #5c6bc0;

  /* Kleuren — brand accent (Indigo, à la Linear) */
  --color-accent:       #6366f1;
  --color-accent-hover: #4f52e0;
  --color-accent-muted: rgba(99, 102, 241, 0.12);

  /* Kleuren — feedback */
  --color-success:      #22c55e;
  --color-success-muted: rgba(34, 197, 94, 0.10);
  --color-error:        #f87171;
  --color-error-muted:  rgba(248, 113, 113, 0.10);
  --color-loading:      #94a3b8;

  /* Typografie */
  --color-text-primary:   #f1f5f9;
  --color-text-secondary: #a7b7cc;
  --color-text-muted:     #798aa3;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
               ui-monospace, monospace;

  --font-size-xs:   0.75rem;   /*  12px */
  --font-size-sm:   0.875rem;  /*  14px */
  --font-size-base: 1rem;      /*  16px */
  --font-size-lg:   1.125rem;  /*  18px */
  --font-size-xl:   1.25rem;   /*  20px */
  --font-size-2xl:  1.5rem;    /*  24px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.6;

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

  /* Borders & Radii */
  --radius-sm:   0.375rem;  /*  6px */
  --radius-md:   0.625rem;  /* 10px */
  --radius-lg:   0.875rem;  /* 14px */
  --radius-xl:   1.25rem;   /* 20px */
  --radius-full: 9999px;

  /* Schaduwen */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 0 3px rgba(99, 102, 241, 0.25);

  /* Transities */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Body & Achtergrond ─────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family:      var(--font-sans);
  font-size:        var(--font-size-base);
  font-weight:      var(--font-weight-normal);
  line-height:      var(--line-height-normal);
  color:            var(--color-text-primary);
  background-color: var(--color-bg);
  min-height:       100vh;

  /* Subtiele rasterachtergrond à la Linear */
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── App Shell ──────────────────────────────────────────────── */
#app-container {
  max-width: 760px;
  margin:    0 auto;
  padding:   var(--space-12) var(--space-6);
}

/* ── Typografie ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-weight:  var(--font-weight-semibold);
  line-height:  var(--line-height-tight);
  color:        var(--color-text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl);  }
h3 { font-size: var(--font-size-lg);  }

p {
  color:       var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* ── Scrollbar (Webkit) ─────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background:    var(--color-border);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ── Selectie ───────────────────────────────────────────────── */
::selection {
  background-color: var(--color-accent-muted);
  color:            var(--color-text-primary);
}

/* ── Top Bar ────────────────────────────────────────────────── */
#top-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-3) var(--space-5);
  margin-bottom:   var(--space-6);
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  box-shadow:      var(--shadow-sm);
}

/* ── Greeting (e-mailadres van de gebruiker) ────────────────── */
#top-bar-greeting {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-muted);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;

  /* Subtiel icoontje vóór het e-mailadres */
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

#top-bar-greeting::before {
  content:          '';
  display:          inline-block;
  width:            26px;
  height:           26px;
  border-radius:    var(--radius-full);
  background-color: var(--color-accent-muted);
  border:           1px solid var(--color-accent);

  /* Avatar-initiaal via SVG background — geen extra HTML nodig */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  flex-shrink: 0;
}

/* ── Uitlog-knop ────────────────────────────────────────────── */
#.topbar-btn {
  /* Reset */
  appearance:  none;
  border:      none;
  cursor:      pointer;

  /* Layout */
  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  flex-shrink:   0;

  /* Stijl — subtiel, niet alarmerend */
  background:  transparent;
  color:       var(--color-text-muted);
  font-family: var(--font-sans);
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border:      1px solid var(--color-border);

  transition:
    background   var(--transition-fast),
    color        var(--transition-fast),
    border-color var(--transition-fast);
}