/* AI Paneel tokens. E-ink huisstijl van aiproefjes.nl / aigekkie.nl:
   Albert Sans 500/600, 0 letter-spacing, 0 border-radius, inkt op papier. */

:root {
  /* Kleuren: papier, inkt, stempel */
  --bg: #F7F7F7;            /* paper: kaarten, werkvlak */
  --bg-2: #EBEBEB;          /* workspace: sidebar, activity bar, kolommen */
  --bg-3: #EDEDED;          /* paper-alt: hover, actief */
  --fg: #111111;            /* ink */
  --fg-2: #333333;          /* ink-soft */
  --fg-3: #686868;          /* ink-mute */
  --line: rgba(17, 17, 17, 0.16); /* hairline */
  --rule: #111111;
  --accent: #111111;        /* geen merkkleur: inkt is de knop */
  --accent-hover: #333333;
  --accent-bg: rgba(17, 17, 17, 0.08);
  --on-accent: #F7F7F7;
  --accent-fill: #111111;
  --accent-fill-hover: #333333;
  --tag-bg: #111111;
  --tag-ink: #F7F7F7;

  /* Status: functioneel, niet merk */
  --ok: #2FBF71;
  --warn: #C9A227;
  --bad: #E5484D;
  --info: #111111;
  --muted: #A6A6A6;
  --on-status: #FFFFFF;
  --warn-fg: #8A6D0C;
  --ok-fg: #1E8A51;

  --shadow-card: none;
  --shadow-card-hover: none;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-float: 0 28px 80px rgba(0, 0, 0, 0.14);
  --backdrop: rgba(17, 17, 17, 0.32);

  /* Login-merkvlak: omgekeerde inkt, geen verloop */
  --gradient: #111111;
  --gradient-menu: #EBEBEB;
  --glass: #F7F7F7;
  --glass-blur: 0px;
  --on-gradient: #F7F7F7;
  --on-gradient-2: #D4D4D4;

  /* Fonts */
  --font-base: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font: var(--font-base);
  --font-display: var(--font-base);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-compact: 13.5px;
  --text-focus: 16px;

  /* Radii: e-ink is haaks */
  --r-sm: 0px;
  --r-btn: 0px;
  --r-btn-lg: 0px;
  --r-card: 0px;
  --r-pill: 0px;

  /* Spacing: bestaande schaal */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;
  --s-160: 160px;

  /* Shell */
  --activity-w: 44px;
  --sidebar-w: 248px;
  --status-h: 24px;
  --header-h: 40px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111;
    --bg-2: #0C0C0C;
    --bg-3: #1C1C1C;
    --fg: #F7F7F7;
    --fg-2: #D4D4D4;
    --fg-3: #8C8C8C;
    --line: rgba(247, 247, 247, 0.18);
    --rule: #F7F7F7;
    --accent: #F7F7F7;
    --accent-hover: #D4D4D4;
    --on-accent: #111111;
    --accent-fill: #F7F7F7;
    --accent-fill-hover: #D4D4D4;
    --accent-bg: rgba(247, 247, 247, 0.14);
    --tag-bg: #F7F7F7;
    --tag-ink: #111111;
    --warn-fg: #E8C547;
    --ok-fg: #2FBF71;
    --shadow-float: none;
    --shadow-card: none;
    --shadow-card-hover: none;
    --backdrop: rgba(0, 0, 0, 0.55);
    --gradient: #F7F7F7;
    --gradient-menu: #0C0C0C;
    --glass: #111111;
    --on-gradient: #111111;
    --on-gradient-2: #333333;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111111;
  --bg-2: #0C0C0C;
  --bg-3: #1C1C1C;
  --fg: #F7F7F7;
  --fg-2: #D4D4D4;
  --fg-3: #8C8C8C;
  --line: rgba(247, 247, 247, 0.18);
  --rule: #F7F7F7;
  --accent: #F7F7F7;
  --accent-hover: #D4D4D4;
  --on-accent: #111111;
  --accent-fill: #F7F7F7;
  --accent-fill-hover: #D4D4D4;
  --accent-bg: rgba(247, 247, 247, 0.14);
  --tag-bg: #F7F7F7;
  --tag-ink: #111111;
  --warn-fg: #E8C547;
  --ok-fg: #2FBF71;
  --shadow-float: none;
  --shadow-card: none;
  --shadow-card-hover: none;
  --backdrop: rgba(0, 0, 0, 0.55);
  --gradient: #F7F7F7;
  --gradient-menu: #0C0C0C;
  --glass: #111111;
  --on-gradient: #111111;
  --on-gradient-2: #333333;
  color-scheme: dark;
}