@import "tailwindcss";
@import './themes/_shared-accents.css';
@import './themes/sage.css';
@import './themes/moss.css';
@import './themes/terracotta.css';
@import './themes/dusk.css';
@import './themes/plum.css';
@import './themes/slate.css';
@source './**/*.{ts,tsx}';

@theme inline {
  --font-serif: var(--font-heading, Newsreader), Georgia, serif;
  --font-sans: var(--font-ui, Inter), system-ui, sans-serif;
  --font-mono: var(--font-data, JetBrains Mono), "Fira Code", monospace;

  --color-surface: var(--surface);
  --color-surface-dim: var(--surface-dim);
  --color-surface-bright: var(--surface-bright);
  --color-surface-container-lowest: var(--surface-container-lowest);
  --color-surface-container-low: var(--surface-container-low);
  --color-surface-container: var(--surface-container);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-container-highest: var(--surface-container-highest);
  --color-surface-variant: var(--surface-variant);
  --color-on-surface: var(--on-surface);
  --color-on-surface-variant: var(--on-surface-variant);
  --color-outline: var(--outline);
  --color-outline-variant: var(--outline-variant);
  --color-primary: var(--primary);
  --color-primary-container: var(--primary-container);
  --color-primary-foreground: var(--primary-foreground);
  --color-on-primary: var(--on-primary);
  --color-on-primary-container: var(--on-primary-container);
  --color-secondary: var(--secondary);
  --color-secondary-container: var(--secondary-container);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-tertiary: var(--tertiary);
  --color-tertiary-container: var(--tertiary-container);
  --color-destructive: var(--destructive, var(--tertiary));
  --color-sage: var(--sage);
  --color-sage-dim: var(--sage-dim);
  --color-ochre: var(--ochre);
  --color-terracotta: var(--terracotta);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --radius-lg: 0.5rem;
  --radius-md: var(--radius);
  --radius-sm: 0.25rem;

  --shadow-ambient: 0 24px 48px rgba(var(--shadow-tint), 0.06);
  --shadow-sage-glow: 0 0 8px var(--sage);
  --shadow-ochre-glow: 0 0 8px var(--ochre);
  --shadow-terracotta-glow: 0 0 8px var(--terracotta);
}

/* ---------- Self-hosted variable fonts ---------- */

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Italic-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */

@layer base {
  /* Dark mode (default) — Tactile Research palette */
  :root {
    --surface: #111111;
    --surface-dim: #0c0c0c;
    --surface-bright: #444444;
    --surface-container-lowest: #080808;
    --surface-container-low: #1a1a1a;
    --surface-container: #242424;
    --surface-container-high: #333333;
    --surface-container-highest: #424242;
    --surface-variant: #3a3a3a;

    --on-surface: #e5e2e1;
    --on-surface-variant: #c1c8c2;

    --outline: #8b928c;
    --outline-variant: #424843;

    --on-primary-container: #143525;

    --inverse-surface: #e5e2e1;
    --inverse-on-surface: #303030;
    --inverse-primary: #446553;

    --shadow-tint: 96, 65, 11;
    --ghost-border: color-mix(in srgb, var(--outline-variant), transparent 75%);

    /* Legacy compat */
    --background: var(--surface);
    --foreground: var(--on-surface);
    --card: var(--surface-container-low);
    --card-foreground: var(--on-surface);
    --muted: var(--surface-container);
    --muted-foreground: var(--on-surface-variant);
    --accent: var(--surface-container-high);
    --accent-foreground: var(--on-surface);
    --border: var(--outline-variant);
    --input: var(--outline-variant);
    --ring: var(--primary);
    --destructive: var(--tertiary);
    --primary-foreground: var(--on-primary);
    --secondary-foreground: var(--on-surface);

    --radius: 0.375rem;
  }

  /* Light mode — Warm Parchment */
  .light {
    --surface: #F9F5E6;
    --surface-dim: #E8E1D1;
    --surface-bright: #FFFFFF;
    --surface-container-lowest: #F4EED8;
    --surface-container-low: #FFFFFF;
    --surface-container: #E8E1D1;
    --surface-container-high: #DDD6C6;
    --surface-container-highest: #D2CABB;
    --surface-variant: #D2CABB;

    --on-surface: #131313;
    --on-surface-variant: #424843;

    --outline: #8b928c;
    --outline-variant: #c1c8c2;

    --on-primary-container: #002113;

    --inverse-surface: #303030;
    --inverse-on-surface: #e5e2e1;
    --inverse-primary: #abcfb8;

    --shadow-tint: 96, 65, 11;
    --ghost-border: color-mix(in srgb, var(--outline-variant), transparent 75%);

    /* Legacy compat */
    --background: var(--surface);
    --foreground: var(--on-surface);
    --card: var(--surface-container-low);
    --card-foreground: var(--on-surface);
    --muted: var(--surface-container);
    --muted-foreground: var(--on-surface-variant);
    --accent: var(--surface-container-high);
    --accent-foreground: var(--on-surface);
    --border: var(--outline-variant);
    --input: var(--outline-variant);
    --ring: var(--primary);
    --destructive: var(--tertiary);
    --primary-foreground: var(--on-primary);
    --secondary-foreground: var(--on-surface);

    --radius: 0.375rem;
  }
}

@layer base {
  * {
    border-color: var(--ghost-border);
  }
  body {
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    /* Override Radix DismissableLayer scroll-lock. Our layout uses overflow-auto
       on <main>, not body scroll — the body pointer-events lock breaks Select
       dropdowns inside the scrollable main area. */
    pointer-events: auto !important;
  }
}

/* ---------- Scrollbars — themed to the active surface ----------
 *
 * The UI has no other scrollbar styling, so scroll containers fall back to
 * the browser default — a light/white classic bar that clashes with the dark
 * theme. Styling them via theme tokens keeps every scrollbar (main content,
 * sidebar nav, list panes) consistent in both dark and light modes.
 *
 * Note: defining `::-webkit-scrollbar` opts out of macOS overlay (auto-hide)
 * scrollbars — bars become always-visible wherever content overflows, but
 * thin and theme-colored rather than the OS default.
 */
html {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--outline-variant) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--outline-variant);
  border-radius: 8px;
  /* Transparent border + padding-box clip renders the thumb as a thin inset
     pill with breathing room inside the 10px track. */
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--outline);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- Dashboard design-system utilities ---------- */

.glass-panel {
  background: color-mix(in srgb, var(--surface-container) 60%, transparent);
  backdrop-filter: blur(12px);
}

/* Hover lift for interactive cards */
.hover-lift {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--shadow-tint), 0.12);
}

.mycelial-connector {
  stroke-dasharray: 4;
  opacity: 0.3;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

/* ---------- Config slider — sage-themed range input ---------- */

@layer components {
  .config-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--surface-container-high);
    outline: none;
    cursor: pointer;
  }
  .config-slider:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .config-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--primary-container);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
  }
  .config-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary), transparent 75%);
  }
  .config-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--primary-container);
    cursor: pointer;
  }
}

/* ---------- v7 display typography ----------
 *
 * Italic Newsreader serif used for card titles and large metric values.
 * Sizes track the v7 reference (`styles-v7.css`):
 *   xs  → connect-step heads (16px)
 *   sm  → settings group titles (18px)
 *   md  → metric card values, vault metric (22px)
 *   lg  → grove identity name (24px)
 *
 * Mono uppercase eyebrows above titles and column headers; the two sizes
 * mirror the 9.5px and 10.5px cases used across v7 surfaces.
 *
 * Classes use the `myco-` prefix instead of `text-*` to avoid `tailwind-merge`
 * collapsing them with `text-{color}` utilities (e.g. `text-sage`) when both
 * are combined via `cn()`.
 */
@layer utilities {
  .myco-display-xs {
    font-family: var(--font-heading, 'Newsreader', Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .myco-display-sm {
    font-family: var(--font-heading, 'Newsreader', Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.005em;
  }
  .myco-display-md {
    font-family: var(--font-heading, 'Newsreader', Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .myco-display-lg {
    font-family: var(--font-heading, 'Newsreader', Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  .myco-eyebrow {
    font-family: var(--font-data, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--outline);
  }
  .myco-eyebrow-sm {
    font-family: var(--font-data, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--outline);
  }
}

/* ---------- Markdown prose ---------- */

.prose-myco {
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--on-surface-variant);
}

.prose-myco h1,
.prose-myco h2,
.prose-myco h3,
.prose-myco h4 {
  font-family: var(--font-heading, 'Newsreader', serif);
  color: var(--on-surface);
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  font-weight: 500;
}

.prose-myco h1 { font-size: 1.25rem; }
.prose-myco h2 { font-size: 1.1rem; }
.prose-myco h3 { font-size: 0.95rem; }

.prose-myco p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose-myco strong {
  color: var(--on-surface);
  font-weight: 600;
}

.prose-myco em {
  font-style: italic;
}

.prose-myco ul,
.prose-myco ol {
  padding-left: 1.25em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose-myco li {
  margin-top: 0.25em;
}

.prose-myco code {
  font-family: var(--font-data, 'JetBrains Mono', monospace);
  font-size: 0.8em;
  padding: 0.15em 0.35em;
  border-radius: 0.2rem;
  background: var(--surface-container);
  color: var(--primary);
}

.prose-myco pre {
  font-family: var(--font-data, 'JetBrains Mono', monospace);
  font-size: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface-variant);
  overflow-x: auto;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose-myco pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.prose-myco blockquote {
  border-left: 2px solid var(--primary-container);
  padding-left: 1em;
  margin-left: 0;
  color: var(--on-surface-variant);
  font-style: italic;
}

.prose-myco hr {
  border: none;
  border-top: 1px solid var(--outline-variant);
  margin: 1em 0;
}

.prose-myco table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.prose-myco th,
.prose-myco td {
  border: 1px solid var(--outline-variant);
  padding: 0.35em 0.5em;
  text-align: left;
}

.prose-myco th {
  background: var(--surface-container);
  font-weight: 600;
  color: var(--on-surface);
}

.prose-myco a {
  color: var(--primary);
  text-decoration: underline;
}

.prose-myco *:first-child {
  margin-top: 0;
}

.prose-myco *:last-child {
  margin-bottom: 0;
}

/* ---------- Markdown prose — compact (list row previews) ---------- */

/*
 * Compact variant: used inside list-row previews where content must fit in a
 * `line-clamp-2/3` container. Headings and paragraphs are flattened to inline
 * body text so the whole blob flows as a single clippable run; emphasis and
 * inline code still render.
 */
.prose-myco-compact {
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--on-surface-variant);
}

.prose-myco-compact h1,
.prose-myco-compact h2,
.prose-myco-compact h3,
.prose-myco-compact h4,
.prose-myco-compact h5,
.prose-myco-compact h6,
.prose-myco-compact p {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
}

/* Separate consecutive blocks with a space rather than a line break. */
.prose-myco-compact h1 + *::before,
.prose-myco-compact h2 + *::before,
.prose-myco-compact h3 + *::before,
.prose-myco-compact h4 + *::before,
.prose-myco-compact p + *::before {
  content: ' ';
}

.prose-myco-compact strong {
  color: var(--on-surface);
  font-weight: 600;
}

.prose-myco-compact em {
  font-style: italic;
}

.prose-myco-compact code {
  font-family: var(--font-data, 'JetBrains Mono', monospace);
  font-size: 0.85em;
  padding: 0 0.25em;
  border-radius: 0.2rem;
  background: var(--surface-container);
  color: var(--primary);
}

.prose-myco-compact ul,
.prose-myco-compact ol {
  display: inline;
  padding: 0;
  margin: 0;
}

.prose-myco-compact li {
  display: inline;
  margin: 0;
}

.prose-myco-compact li::before {
  content: '• ';
}

.prose-myco-compact li + li::before {
  content: ' • ';
}

.prose-myco-compact a {
  color: inherit;
  text-decoration: none;
}

/* Hide block elements that can't be meaningfully flattened. */
.prose-myco-compact pre,
.prose-myco-compact blockquote,
.prose-myco-compact hr,
.prose-myco-compact table {
  display: none;
}
