/* ────────────────────────────────────────────────────────────────────────────
   Paperclip — Cursor IDE dark theme + Linear-style hierarchy boost
   Cursor's signature is intentionally flat ; we keep the palette but add
   depth and active-state cues so a dense dashboard like Paperclip reads
   clearly without losing the "tech editor" vibe.
   ──────────────────────────────────────────────────────────────────────────── */

html.dark {
  /* ─── Surfaces — wider tonal range for better depth perception ──────── */
  --background:           oklch(0.150 0.003 270);  /* #141414 main */
  --foreground:           oklch(0.870 0.003 240);  /* brighter for body text */

  --card:                 oklch(0.200 0.004 270);  /* #1f1f1f layer +1 (was 0.190) */
  --card-foreground:      oklch(0.880 0.003 240);

  --popover:              oklch(0.230 0.005 270);  /* #2a2a2a layer +2 (was 0.205) */
  --popover-foreground:   oklch(0.910 0.003 240);

  /* ─── Primary = VS Code blue, slightly brighter for actionability ───── */
  --primary:              oklch(0.625 0.165 240);  /* #0a8fe3 — VS Code blue+ */
  --primary-foreground:   oklch(0.985 0.000 0);

  --secondary:            oklch(0.245 0.004 270);  /* clearer button bg */
  --secondary-foreground: oklch(0.880 0.003 240);

  --muted:                oklch(0.215 0.004 270);
  --muted-foreground:     oklch(0.680 0.006 240);  /* #a0a0a0 — was too dim (#888) */

  --accent:               oklch(0.290 0.015 250);  /* hover/active — more visible */
  --accent-foreground:    oklch(0.920 0.003 240);

  --destructive:          oklch(0.605 0.205 25);
  --destructive-foreground: oklch(0.985 0.000 0);

  /* ─── Borders — still subtle but actually visible (was #2a → #3a) ───── */
  --border:               oklch(0.290 0.005 270);  /* #3a3a3a clearly visible */
  --input:                oklch(0.255 0.004 270);
  --ring:                 oklch(0.715 0.155 295);  /* composer-AI purple signature */

  /* ─── Sidebar — darker than main, separation by tonal jump ──────────── */
  --sidebar:                      oklch(0.115 0.003 270);  /* #0e0e0e — distinctly darker */
  --sidebar-foreground:           oklch(0.835 0.003 240);
  --sidebar-primary:              oklch(0.625 0.165 240);
  --sidebar-primary-foreground:   oklch(0.985 0.000 0);
  --sidebar-accent:               oklch(0.265 0.012 250);  /* clear hover/active bg */
  --sidebar-accent-foreground:    oklch(0.940 0.003 240);
  --sidebar-border:               oklch(0.265 0.005 270);  /* visible separator */
  --sidebar-ring:                 oklch(0.715 0.155 295);

  /* ─── Charts — Cursor-ish data palette (cool dominant) ──────────────── */
  --chart-1: oklch(0.625 0.165 240);    /* VS Code blue */
  --chart-2: oklch(0.700 0.140 145);    /* sage green */
  --chart-3: oklch(0.720 0.140 60);     /* warm gold */
  --chart-4: oklch(0.660 0.165 300);    /* composer purple */
  --chart-5: oklch(0.660 0.160 15);     /* coral */
}

/* ─── Tokens custom Paperclip (chips, shimmer, error) ───────────────────── */
html.dark {
  --chip-match-comment-bg:     oklch(0.275 0.030 145);
  --chip-match-comment-border: oklch(0.395 0.060 145);
  --chip-match-comment-fg:     oklch(0.900 0.025 145);

  --chip-match-document-bg:     oklch(0.265 0.045 240);
  --chip-match-document-border: oklch(0.385 0.080 240);
  --chip-match-document-fg:     oklch(0.900 0.025 240);

  --chip-match-identifier-bg:     oklch(0.280 0.050 295);
  --chip-match-identifier-border: oklch(0.405 0.085 295);
  --chip-match-identifier-fg:     oklch(0.910 0.025 295);

  --chip-match-title-bg:     oklch(0.280 0.035 60);
  --chip-match-title-border: oklch(0.395 0.070 60);
  --chip-match-title-fg:     oklch(0.900 0.025 60);

  --shimmer-base:      oklch(0.200 0.004 270);
  --shimmer-highlight: oklch(0.280 0.006 270);

  --error-color: oklch(0.605 0.205 25);
}

/* ════════════════════════════════════════════════════════════════════════
   HIERARCHY ENHANCERS — boost what shadcn defaults leave too subtle
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Typography — titles louder, body unchanged ────────────────────── */
html.dark h1,
html.dark [role="heading"][aria-level="1"] {
  letter-spacing: -0.024em;
  font-weight: 700;
  color: oklch(0.965 0.003 240);
}
html.dark h2,
html.dark [role="heading"][aria-level="2"] {
  letter-spacing: -0.018em;
  font-weight: 650;
  color: oklch(0.940 0.003 240);
}
html.dark h3,
html.dark [role="heading"][aria-level="3"] {
  letter-spacing: -0.012em;
  font-weight: 600;
  color: oklch(0.920 0.003 240);
}
html.dark h4, html.dark h5, html.dark h6 {
  letter-spacing: -0.006em;
  font-weight: 600;
  color: oklch(0.900 0.003 240);
}

/* ─── 2. Uppercase section labels — boost the "Work / Projects / Agents"
       and "Status / Priority / Labels" labels that shadcn leaves at 60% ── */
html.dark .uppercase,
html.dark [class*="uppercase"],
html.dark .text-\[10px\].uppercase,
html.dark .text-\[11px\].uppercase {
  color: oklch(0.620 0.008 240) !important;        /* +brightness vs default */
  letter-spacing: 0.08em !important;                /* +tracking-widest */
  font-weight: 600 !important;
}

/* Inside sidebar — slightly more contrast for section labels */
html.dark [data-slot="sidebar"] .uppercase,
html.dark aside .uppercase {
  color: oklch(0.580 0.008 240) !important;
}

/* ─── 3. Sidebar active state — Linear-style left-accent ────────────────
   Targets links/buttons with aria-current="page" or bg-accent class */
html.dark a[aria-current="page"],
html.dark aside a[aria-current="page"] {
  position: relative;
  background: var(--sidebar-accent) !important;
  color: var(--sidebar-accent-foreground) !important;
  font-weight: 600 !important;
}
html.dark a[aria-current="page"]::before,
html.dark aside a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2.5px;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}

/* ─── 4. Cards / Properties panel — subtle elevation ───────────────────── */
html.dark [data-slot="popover-content"],
html.dark [data-slot="dropdown-menu-content"],
html.dark [data-slot="dialog-content"] {
  box-shadow:
    0 1px 0 0 oklch(1 0 0 / 0.04) inset,
    0 12px 32px -8px rgba(0, 0, 0, 0.55),
    0 4px 12px -2px rgba(0, 0, 0, 0.35);
}

/* Top border highlight on cards/properties — gives a "lit from above" feel */
html.dark aside.border-l,
html.dark aside.border-r,
html.dark [class*="bg-card"] {
  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.025);
}

/* ─── 5. Section dividers — more vertical breath ───────────────────────── */
html.dark [data-slot="separator"][data-orientation="horizontal"] {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border) 8%,
    var(--border) 92%,
    transparent 100%
  );
  height: 1px;
}

/* ─── 6. Links — VS Code blue, brighter on hover ───────────────────────── */
html.dark a:not([class*="btn"]):not([class*="button"]):not([aria-current]):not([data-slot]) {
  color: oklch(0.730 0.150 240);
  text-decoration-color: oklch(0.730 0.150 240 / 0.30);
  text-underline-offset: 2px;
  transition: color 120ms ease-out, text-decoration-color 120ms ease-out;
}
html.dark a:not([class*="btn"]):not([class*="button"]):not([aria-current]):not([data-slot]):hover {
  color: oklch(0.800 0.150 240);
  text-decoration-color: oklch(0.800 0.150 240 / 0.7);
}

/* ─── 7. Code inline — VS Code style ───────────────────────────────────── */
html.dark code:not(pre code) {
  background: oklch(0.235 0.004 270);
  color: oklch(0.755 0.115 30);
  padding: 0.125rem 0.4rem;
  border-radius: 3px;
  border: 1px solid oklch(0.310 0.005 270);
  font-size: 0.875em;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ─── 8. Selection — VS Code blue translucent ───────────────────────────── */
html.dark ::selection {
  background: oklch(0.625 0.165 240 / 0.40);
  color: oklch(0.985 0.003 240);
}

/* ─── 9. Focus ring — composer-AI purple (Cursor signature) ────────────── */
html.dark :focus-visible {
  outline: 2px solid oklch(0.715 0.155 295);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ─── 10. Scrollbars — thin, subtle, blue tint on hover ────────────────── */
html.dark {
  scrollbar-color: oklch(0.310 0.005 270) oklch(0.150 0.003 270);
  scrollbar-width: thin;
}
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: oklch(0.150 0.003 270); }
html.dark ::-webkit-scrollbar-thumb {
  background: oklch(0.310 0.005 270);
  border-radius: 5px;
  border: 2px solid oklch(0.150 0.003 270);
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: oklch(0.400 0.015 250);
}

/* ─── 11. Breadcrumb — slight emphasis on the current page ─────────────── */
html.dark [data-slot="breadcrumb-page"] {
  color: oklch(0.940 0.003 240);
  font-weight: 550;
}
html.dark [data-slot="breadcrumb-link"] {
  color: oklch(0.640 0.006 240);
}
html.dark [data-slot="breadcrumb-link"]:hover {
  color: oklch(0.870 0.005 240);
}