/* =============================================================
   2ND BRAIN — Design System v1 (FB MVP)
   Tokens + utility components per pagine secondarie (/m, /feedback,
   /bookmarklet, /quick-capture). Dashboard principale resta indipendente.
   Light + Dark mode coerenti.
   ============================================================= */

:root,
[data-theme="light"]{
  /* surface */
  --ds-bg:           #fafaf7;
  --ds-bg-alt:       #f0f0eb;
  --ds-surface:      #ffffff;
  --ds-surface-2:    #f5f5f0;
  --ds-border:       #e5e5e0;
  --ds-border-2:     #d0d0c8;

  /* text */
  --ds-text:         #1a1a18;
  --ds-text-muted:   #6b6b66;
  --ds-text-subtle:  #9b9b95;
  --ds-text-invert:  #fafaf7;

  /* brand + intent */
  --ds-brand:        #3b82f6;
  --ds-brand-hover:  #2563eb;
  --ds-brand-soft:   #dbeafe;
  --ds-success:      #10b981;
  --ds-success-soft: #d1fae5;
  --ds-warn:         #f59e0b;
  --ds-warn-soft:    #fef3c7;
  --ds-danger:       #ef4444;
  --ds-danger-soft:  #fee2e2;
  --ds-info:         #06b6d4;
  --ds-info-soft:    #cffafe;
}

[data-theme="dark"]{
  --ds-bg:           #0a0a0a;
  --ds-bg-alt:       #111114;
  --ds-surface:      #16161a;
  --ds-surface-2:    #1e1e22;
  --ds-border:       #25252b;
  --ds-border-2:     #34343a;

  --ds-text:         #ededed;
  --ds-text-muted:   #a8a8a3;
  --ds-text-subtle:  #6e6e69;
  --ds-text-invert:  #1a1a18;

  --ds-brand:        #60a5fa;
  --ds-brand-hover:  #3b82f6;
  --ds-brand-soft:   #1e3a8a;
  --ds-success:      #34d399;
  --ds-success-soft: #064e3b;
  --ds-warn:         #fbbf24;
  --ds-warn-soft:    #78350f;
  --ds-danger:       #f87171;
  --ds-danger-soft:  #7f1d1d;
  --ds-info:         #22d3ee;
  --ds-info-soft:    #155e75;
}

/* fallback default = dark per pagine secondarie */
html:not([data-theme]){
  color-scheme: dark;
}
html:not([data-theme]) body.ds-page{
  --ds-bg: #0a0a0a; --ds-bg-alt: #111114; --ds-surface: #16161a; --ds-surface-2: #1e1e22;
  --ds-border: #25252b; --ds-border-2: #34343a;
  --ds-text: #ededed; --ds-text-muted: #a8a8a3; --ds-text-subtle: #6e6e69; --ds-text-invert: #1a1a18;
  --ds-brand: #60a5fa; --ds-brand-hover: #3b82f6; --ds-brand-soft: #1e3a8a;
  --ds-success: #34d399; --ds-success-soft: #064e3b;
  --ds-warn: #fbbf24; --ds-warn-soft: #78350f;
  --ds-danger: #f87171; --ds-danger-soft: #7f1d1d;
  --ds-info: #22d3ee; --ds-info-soft: #155e75;
}

:root{
  /* spacing scale (4-base) */
  --ds-s-1: 4px;  --ds-s-2: 8px;  --ds-s-3: 12px; --ds-s-4: 16px;
  --ds-s-5: 20px; --ds-s-6: 24px; --ds-s-8: 32px; --ds-s-10: 40px;
  --ds-s-12: 48px;

  /* radius */
  --ds-r-sm: 4px; --ds-r-md: 6px; --ds-r-lg: 10px; --ds-r-xl: 14px; --ds-r-full: 9999px;

  /* type scale */
  --ds-fs-xs: 0.72rem; --ds-fs-sm: 0.82rem; --ds-fs-base: 0.92rem;
  --ds-fs-md: 1rem; --ds-fs-lg: 1.15rem; --ds-fs-xl: 1.35rem; --ds-fs-2xl: 1.65rem;
  --ds-lh-tight: 1.25; --ds-lh-base: 1.5; --ds-lh-loose: 1.7;

  /* shadow */
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --ds-shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --ds-shadow-lg: 0 8px 28px rgba(0,0,0,.16);

  /* motion */
  --ds-dur-fast: 120ms; --ds-dur-base: 200ms; --ds-dur-slow: 400ms;
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* font */
  --ds-font: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --ds-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ============================================================
   BASE
   ============================================================ */
body.ds-page{
  font-family: var(--ds-font);
  background: var(--ds-bg);
  color: var(--ds-text);
  line-height: var(--ds-lh-base);
  font-size: var(--ds-fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.ds-page *,
body.ds-page *::before,
body.ds-page *::after { box-sizing: border-box; }

body.ds-page h1, body.ds-page h2, body.ds-page h3 { font-weight: 600; line-height: var(--ds-lh-tight); }
body.ds-page h1 { font-size: var(--ds-fs-xl); }
body.ds-page h2 {
  font-size: var(--ds-fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ds-text-muted);
  font-weight: 600;
}

body.ds-page a { color: var(--ds-brand); text-decoration: none; transition: color var(--ds-dur-fast) var(--ds-ease); }
body.ds-page a:hover { color: var(--ds-brand-hover); }

/* ============================================================
   COMPONENT: BUTTON
   ============================================================ */
.ds-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-s-2);
  background: var(--ds-brand); color: #fff; border: 0;
  padding: var(--ds-s-2) var(--ds-s-4);
  border-radius: var(--ds-r-md);
  font: 600 var(--ds-fs-sm) var(--ds-font);
  cursor: pointer;
  transition: background var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
  user-select: none;
}
.ds-btn:hover:not(:disabled){ background: var(--ds-brand-hover); }
.ds-btn:active:not(:disabled){ transform: scale(0.98); }
.ds-btn:disabled{ opacity: 0.5; cursor: not-allowed; }
.ds-btn:focus-visible{ outline: 2px solid var(--ds-brand); outline-offset: 2px; }

.ds-btn--ghost{ background: transparent; color: var(--ds-text); border: 1px solid var(--ds-border); }
.ds-btn--ghost:hover:not(:disabled){ background: var(--ds-surface-2); border-color: var(--ds-border-2); }

.ds-btn--success{ background: var(--ds-success); }
.ds-btn--danger{ background: var(--ds-danger); }
.ds-btn--sm{ padding: 4px var(--ds-s-3); font-size: var(--ds-fs-xs); }
.ds-btn--block{ width: 100%; }

/* ============================================================
   COMPONENT: CARD
   ============================================================ */
.ds-card{
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-s-4);
  margin-bottom: var(--ds-s-3);
  transition: border-color var(--ds-dur-base) var(--ds-ease);
}
.ds-card:hover{ border-color: var(--ds-border-2); }
.ds-card__title{
  font-size: var(--ds-fs-xs);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ds-text-muted);
  font-weight: 600;
  margin-bottom: var(--ds-s-3);
}

/* ============================================================
   COMPONENT: INPUT / TEXTAREA / SELECT
   ============================================================ */
.ds-input, .ds-textarea, .ds-select{
  width: 100%;
  background: var(--ds-bg-alt);
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  padding: var(--ds-s-2) var(--ds-s-3);
  font: var(--ds-fs-base) var(--ds-font);
  transition: border-color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease);
}
.ds-input:focus, .ds-textarea:focus, .ds-select:focus{
  outline: 0;
  border-color: var(--ds-brand);
  background: var(--ds-surface);
}
.ds-textarea{ resize: vertical; min-height: 80px; line-height: var(--ds-lh-base); }
.ds-input::placeholder, .ds-textarea::placeholder{ color: var(--ds-text-subtle); }

.ds-label{
  display: block;
  font-size: var(--ds-fs-xs);
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-s-1);
  font-weight: 500;
}

/* ============================================================
   COMPONENT: TOAST (global notifications system)
   ============================================================ */
.ds-toast-container{
  position: fixed; bottom: var(--ds-s-5); right: var(--ds-s-5);
  display: flex; flex-direction: column; gap: var(--ds-s-2);
  z-index: 9999;
  pointer-events: none;
}
.ds-toast{
  background: var(--ds-surface);
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-info);
  border-radius: var(--ds-r-md);
  padding: var(--ds-s-3) var(--ds-s-4);
  font-size: var(--ds-fs-sm);
  box-shadow: var(--ds-shadow-md);
  pointer-events: auto;
  min-width: 220px; max-width: 360px;
  animation: ds-toast-in var(--ds-dur-base) var(--ds-ease);
}
.ds-toast--success{ border-left-color: var(--ds-success); }
.ds-toast--warn{ border-left-color: var(--ds-warn); }
.ds-toast--error{ border-left-color: var(--ds-danger); }
.ds-toast--leaving{ animation: ds-toast-out var(--ds-dur-base) var(--ds-ease) forwards; }

@keyframes ds-toast-in{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes ds-toast-out{
  from{ opacity: 1; transform: translateY(0); }
  to{ opacity: 0; transform: translateY(8px); }
}

/* ============================================================
   COMPONENT: SKELETON (loading states)
   ============================================================ */
.ds-skeleton{
  background: linear-gradient(90deg, var(--ds-surface) 0%, var(--ds-surface-2) 50%, var(--ds-surface) 100%);
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--ds-r-sm);
  display: block;
}
.ds-skeleton--text{ height: 12px; margin-bottom: var(--ds-s-2); }
.ds-skeleton--title{ height: 18px; width: 60%; margin-bottom: var(--ds-s-3); }
.ds-skeleton--paragraph{ height: 12px; margin-bottom: var(--ds-s-2); }
.ds-skeleton--paragraph:nth-child(odd){ width: 92%; }
.ds-skeleton--paragraph:nth-child(even){ width: 78%; }
.ds-skeleton--avatar{ height: 36px; width: 36px; border-radius: var(--ds-r-full); }
.ds-skeleton--card{ height: 80px; margin-bottom: var(--ds-s-3); border-radius: var(--ds-r-lg); }

@keyframes ds-skeleton-shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ============================================================
   COMPONENT: EMPTY STATE
   ============================================================ */
.ds-empty{
  text-align: center;
  padding: var(--ds-s-10) var(--ds-s-5);
  color: var(--ds-text-muted);
}
.ds-empty__icon{ font-size: 2.4rem; opacity: .35; margin-bottom: var(--ds-s-3); }
.ds-empty__title{ font-size: var(--ds-fs-md); color: var(--ds-text); margin-bottom: var(--ds-s-2); }
.ds-empty__hint{ font-size: var(--ds-fs-sm); margin-bottom: var(--ds-s-4); }

/* ============================================================
   PILL / BADGE
   ============================================================ */
.ds-pill{
  display: inline-block;
  font-size: var(--ds-fs-xs);
  padding: 2px var(--ds-s-2);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-2);
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
}
.ds-pill--brand{ background: var(--ds-brand-soft); color: var(--ds-brand); }
.ds-pill--success{ background: var(--ds-success-soft); color: var(--ds-success); }
.ds-pill--warn{ background: var(--ds-warn-soft); color: var(--ds-warn); }
.ds-pill--danger{ background: var(--ds-danger-soft); color: var(--ds-danger); }
.ds-pill--info{ background: var(--ds-info-soft); color: var(--ds-info); }

/* ============================================================
   STATUS DOT
   ============================================================ */
.ds-dot{ display: inline-block; width: 8px; height: 8px; border-radius: var(--ds-r-full); }
.ds-dot--success{ background: var(--ds-success); }
.ds-dot--warn{ background: var(--ds-warn); }
.ds-dot--danger{ background: var(--ds-danger); }
.ds-dot--info{ background: var(--ds-info); }
.ds-dot--muted{ background: var(--ds-text-subtle); }

/* ============================================================
   THEME TOGGLE BUTTON (per dashboard sidebar)
   ============================================================ */
.ds-theme-toggle{
  background: transparent; border: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  width: 28px; height: 28px;
  border-radius: var(--ds-r-md);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: all var(--ds-dur-fast) var(--ds-ease);
}
.ds-theme-toggle:hover{ background: var(--ds-surface-2); color: var(--ds-text); }