@import './styles/print.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes hero-kpi-reveal {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-kpi-reveal {
  animation: hero-kpi-reveal 420ms ease-out both;
}

@media (prefers-reduced-motion: reduce), print {
  .hero-kpi-reveal {
    animation: none;
  }
}

/* Scroll-reveal for marketing pages: element stays invisible until the
   IntersectionObserver adds .is-visible, then rises once. Reduced-motion
   users see the content immediately, unanimated. */
@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-rise {
  opacity: 0;
}

.reveal-rise.is-visible {
  animation: reveal-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce), print {
  .reveal-rise,
  .reveal-rise.is-visible {
    opacity: 1;
    animation: none;
  }
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  DESIGN SYSTEM TOKENS
 *  Theme: "Jiminy — The Cartographer's Study" · Brand System v3
 *  Fonts: IBM Plex Sans (body/UI), Libre Caslon Text (display/editorial)
 *
 *  TOKEN NAMING CONVENTION:
 *  --primary         → Verdigris. Actions & emphasis ONLY.
 *  --secondary       → Vellum-warm. Structure & helper panels.
 *  --muted           → Vellum-deep. Helper text & dividers.
 *  --accent          → Gilt gold tint. Sparse highlights.
 *  --success/warning/destructive → Semantic states only.
 *
 *  BRAND PALETTE ORIGIN (v3 — The Cartographer's Study):
 *  Ink (#1a2820), Canvas (#f2eeea), Verdigris (#3d8c74),
 *  Gilt (#c0a040), Cognac (#8a5234)
 *
 *  RULE: No component may use arbitrary hex. Everything maps
 *  to a token defined here or in tailwind.config.ts.
 * ═══════════════════════════════════════════════════════════════
 */

@layer base {
  :root {
    /* ── Brand Primary: Verdigris (patina on old brass) ───────── */
    --primary: 162 39% 39%;              /* #3d8c74 – verdigris */
    --primary-foreground: 0 0% 100%;     /* white on verdigris */
    --primary-light: 161 29% 78%;        /* #b8d8ce – verdigris pale */
    --primary-dark: 163 41% 28%;         /* #2a6454 – verdigris deep */

    /* ── Neutral Foundations (warm greige canvas) ────────────── */
    --background: 36 18% 95%;            /* #f5f3ef – canvas */
    --foreground: 146 21% 13%;           /* #1a2820 – cartographer's ink */

    --card: 0 0% 100%;                   /* #ffffff – pure white */
    --card-foreground: 146 21% 13%;      /* ink for card text */
    --card-border: 34 14% 91%;           /* #ece9e3 – softer than canvas border */
    --card-hover: 40 20% 98%;            /* #fdfcfa – subtle warm lift */

    --popover: 0 0% 100%;               /* pure white */
    --popover-foreground: 146 21% 13%;

    /* ── Canvas Surface Variants ─────────────────────────────── */
    --canvas-warm: 33 13% 90%;           /* #ede9e1 – section tinting */
    --canvas-deep: 30 10% 87%;           /* #e3ddd4 – recessed areas */

    /* ── Secondary: Warm neutral (structure) ─────────────────── */
    --secondary: 33 13% 90%;             /* #ede9e1 – canvas-warm */
    --secondary-foreground: 132 16% 24%; /* #344838 – oak gall ink */

    /* ── Muted: Deep warm neutral ────────────────────────────── */
    --muted: 30 10% 87%;                 /* #e3ddd4 – canvas-deep */
    --muted-foreground: 127 9% 40%;      /* #5e7060 – faded secondary */

    /* ── Accent: Gilt gold tint ──────────────────────────────── */
    --accent: 49 69% 81%;               /* #f0e4ac – gilt pale */
    --accent-foreground: 44 56% 35%;    /* #8c7228 – gilt deep */

    /* ── Semantic States (Jiminy brand) ──────────────────────── */
    --success: 159 29% 52%;             /* #62a890 – verdigris light */
    --success-foreground: 0 0% 100%;
    --warning: 45 50% 50%;              /* #c0a040 – gilt (gold anchor) */
    --warning-foreground: 146 21% 13%;
    --destructive: 0 35% 57%;           /* muted rose (unchanged) */
    --destructive-foreground: 0 0% 100%;
    --info: 211 30% 50%;                /* steel blue (unchanged) */
    --info-foreground: 0 0% 100%;
    --special: 260 22% 56%;             /* dusk violet — AI/Jiminy */
    --special-foreground: 0 0% 100%;

    /* ── Woad — Jiminy AI conscience layer ────────────────────── */
    --woad: 255 18% 48%;                /* #6e6490 – woad purple */
    --woad-foreground: 0 0% 100%;
    --woad-light: 253 14% 63%;          /* #9890b0 */
    --woad-pale: 255 18% 48% / 0.07;    /* tint bg */

    /* ── Cognac — aged leather, sparingly ─────────────────────── */
    --cognac: 21 45% 37%;               /* #8a5234 – book binding */
    --cognac-foreground: 0 0% 100%;
    --cognac-pale: 28 46% 78%;          /* #e0c4ac – pale wash */

    /* ── Madder — error accent ───────────────────────────────── */
    --madder: 0 32% 46%;                /* #9c5050 */
    --madder-pale: 0 32% 46% / 0.08;

    /* ── Gilt — display gold token ───────────────────────────── */
    --gilt: 45 50% 50%;                 /* #c0a040 */
    --gilt-light: 45 59% 63%;           /* #d8bc68 */
    --gilt-deep: 44 56% 35%;            /* #8c7228 */

    /* ── Text hierarchy ──────────────────────────────────────── */
    --text-body: 132 16% 24%;            /* #344838 – prose body */
    --text-secondary: 127 9% 40%;        /* #5e7060 – descriptions */
    --text-muted: 128 8% 57%;            /* #8a9a88 – labels */
    --text-ghost: 120 7% 74%;            /* #b8c4b4 – placeholders (corrected) */

    /* ── Borders & Inputs ────────────────────────────────────── */
    --border: 33 12% 85%;               /* #e0dbd2 – warm greige border */
    --input: 33 12% 85%;
    --ring: 162 39% 39%;                /* verdigris focus ring */

    /* ── Chart Colors ────────────────────────────────────────── */
    --chart-1: 162 39% 39%;
    --chart-2: 45 50% 50%;
    --chart-3: 21 45% 37%;
    --chart-4: 260 22% 56%;
    --chart-5: 0 35% 57%;

    /* ── Hero Dashboard Surface — Cartographer's Study (paper canvas) ──
       Note: token names retained for compatibility. Semantically:
         hero-ink   = surface background (paper)
         hero-soft  = lifted surface (cards, tooltips)
         hero-lift  = stronger lift
         hero-paper = primary foreground/text on the surface (ink dark)
         hero-muted = secondary text
         hero-deep  = tertiary text / labels                                */
    --hero-ink:   36 18% 95%;            /* #f5f3ef — paper canvas */
    --hero-soft:  36 16% 91%;            /* lifted paper */
    --hero-lift:  36 14% 86%;            /* card lift */
    --hero-paper: 146 23% 13%;           /* #1a2820 — primary ink text */
    --hero-muted: 146 14% 32%;           /* secondary ink */
    --hero-deep:  146 12% 42%;           /* tertiary ink / labels */

    /* ── Chart series — instrument (brand) ──────────────────── */
    --chart-vc:    162 39% 48%;          /* verdigris  #3d8c74 */
    --chart-grant: 45 55% 55%;           /* gilt       #c0a040 */
    --chart-debt:  23 38% 54%;           /* copper     #b87d5b */

    /* ── Chart series — sector palette (1..8) — brand-tinted ── */
    --chart-sector-1: 45 55% 55%;        /* gilt */
    --chart-sector-2: 162 39% 48%;       /* verdigris */
    --chart-sector-3: 23 38% 54%;        /* copper */
    --chart-sector-4: 161 29% 65%;       /* verdigris pale */
    --chart-sector-5: 44 56% 38%;        /* gilt deep */
    --chart-sector-6: 175 26% 48%;       /* teal */
    --chart-sector-7: 256 18% 60%;       /* heather */
    --chart-sector-8: 36 28% 62%;        /* warm sand */

    /* ── Organization Category Colors (8 buckets) ──────────── */
    --org-ecosystem: 280 60% 55%;
    --org-ecosystem-foreground: 0 0% 100%;
    --org-ecosystem-light: 280 60% 94%;
    --org-academic: 210 70% 50%;
    --org-academic-foreground: 0 0% 100%;
    --org-academic-light: 210 70% 94%;
    --org-government: 195 65% 45%;
    --org-government-foreground: 0 0% 100%;
    --org-government-light: 195 65% 93%;
    --org-capital: 162 39% 39%;
    --org-capital-foreground: 0 0% 100%;
    --org-capital-light: 161 29% 78%;
    --org-corporate: 230 55% 52%;
    --org-corporate-foreground: 0 0% 100%;
    --org-corporate-light: 230 55% 94%;
    --org-wealth: 45 50% 50%;
    --org-wealth-foreground: 0 0% 100%;
    --org-wealth-light: 49 69% 81%;
    --org-platform: 15 75% 55%;
    --org-platform-foreground: 0 0% 100%;
    --org-platform-light: 15 75% 94%;
    --org-uncategorized: 340 65% 55%;
    --org-uncategorized-foreground: 0 0% 100%;
    --org-uncategorized-light: 340 65% 94%;

    /* ── Assessment Dimension Accents ────────────────────────── */
    --dim-problem: 350 45% 55%;
    --dim-problem-light: 350 30% 95%;
    --dim-market: 200 50% 50%;
    --dim-market-light: 200 35% 94%;
    --dim-founder: 45 50% 50%;
    --dim-founder-light: 49 69% 81%;
    --dim-solution: 162 39% 39%;
    --dim-solution-light: 161 29% 78%;
    --dim-competitive: 270 35% 55%;
    --dim-competitive-light: 270 25% 94%;
    --dim-business: 240 25% 45%;
    --dim-business-light: 240 18% 94%;

    /* ── Evidence Strength Accents ────────────────────────────── */
    --ev-behavior: 210 60% 50%;
    --ev-behavior-light: 210 40% 94%;
    --ev-data: 270 35% 55%;
    --ev-data-light: 270 25% 94%;
    --ev-commitment: 45 50% 50%;
    --ev-commitment-light: 49 69% 81%;
    --ev-revenue: 162 39% 39%;
    --ev-revenue-light: 161 29% 78%;

    /* ── Navbar (ink shell) ───────────────────────────────────── */
    --navbar: 146 21% 13%;               /* #1a2820 – ink */
    --navbar-foreground: 45 51% 86%;     /* #ede4c8 – on-dark-primary */

    /* ── Shell text hierarchy (on dark ink backgrounds) ─────── */
    --on-dark-primary: 45 51% 86%;       /* #ede4c8 – bright text */
    --on-dark-body: 120 10% 69%;         /* #a8b8a8 – body text */
    --on-dark-dim: 135 14% 47%;          /* #6a8872 – nav items rest (corrected) */
    --on-dark-section: 160 14% 36%;      /* #506860 – sidebar section headings (new) */
    --on-dark-ghost: 136 18% 24%;        /* #3c5843 – decorative only, not for text */

    /* ── Sidebar (ink shell — always dark) ────────────────────── */
    --sidebar: 146 21% 13%;              /* #1a2820 – ink */
    --sidebar-foreground: 120 10% 69%;   /* on-dark-body — default text */
    --sidebar-primary: 162 39% 39%;      /* verdigris */
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 146 27% 19%;       /* verdigris/10% on ink — active bg */
    --sidebar-accent-foreground: 45 51% 86%; /* on-dark-primary — active text */
    --sidebar-border: 146 12% 16%;       /* rgba(255,255,255,0.055) approx */
    --sidebar-ring: 162 39% 39%;

    /* ── Typography ──────────────────────────────────────────── */
    /* Brand v3 type, 2026-09-21: interior surfaces now match the public
       Jiminy brand (IBM Plex Sans / Libre Caslon Text) instead of the
       earlier Raleway/Cormorant pair. Single source of truth for the app. */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* ── Shape & Elevation (tuned for warm greige canvas) ───── */
    --radius: 0.3125rem;                 /* 5px – tighter, editorial */
    --shadow-2xs: 0 1px 2px 0 hsl(146 21% 13% / 0.03);
    --shadow-xs: 0 1px 2px 0 hsl(146 21% 13% / 0.04);
    --shadow-sm: 0 1px 3px hsl(146 21% 13% / 0.07), 0 2px 8px hsl(146 21% 13% / 0.04);
    --shadow: 0 1px 3px hsl(146 21% 13% / 0.07), 0 2px 8px hsl(146 21% 13% / 0.04);
    --shadow-md: 0 4px 16px hsl(146 21% 13% / 0.1), 0 1px 4px hsl(146 21% 13% / 0.06);
    --shadow-lg: 0 8px 32px hsl(146 21% 13% / 0.12), 0 2px 8px hsl(146 21% 13% / 0.06);
    --shadow-xl: 0 20px 25px -5px hsl(146 21% 13% / 0.08), 0 8px 10px -6px hsl(146 21% 13% / 0.05);
    --shadow-2xl: 0 25px 50px -12px hsl(146 21% 13% / 0.15);
    /* Hard offset shadow for architectural canvas cards */
    --shadow-hard: 6px 6px 0px 0px hsl(146 21% 13% / 0.12);
    --tracking-normal: 0em;
    --spacing: 0.25rem;

    /* ── Interactive Element Tokens (Jiminy Interactive v1) ──── */
    --shadow-btn: 0 1px 3px hsl(146 21% 13% / 0.12), 0 1px 2px hsl(146 21% 13% / 0.08);
    --shadow-btn-raise: 0 4px 12px hsl(146 21% 13% / 0.15), 0 1px 3px hsl(146 21% 13% / 0.1);
    --focus-ring: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary));
    --focus-ring-dark: 0 0 0 2px hsl(var(--navbar)), 0 0 0 4px hsl(var(--primary));

    /* ── Verdigris interactive states ─────────────────────────── */
    --verdigris-hover: 163 41% 31%;      /* #2e7260 */
    --verdigris-press: 165 49% 23%;      /* #1e5848 */
    --verdigris-pale: 162 39% 39% / 0.09;
    --verdigris-mid: 162 39% 39% / 0.18;
  }

  .dark {
    /* ── Brand Primary: Verdigris on ink shell ────────────────── */
    --primary: 162 39% 39%;
    --primary-foreground: 146 21% 13%;
    --primary-light: 163 41% 28%;
    --primary-dark: 159 29% 52%;

    /* ── Foundations (ink shell) ──────────────────────────────── */
    --background: 146 21% 13%;           /* #1a2820 – ink */
    --foreground: 45 51% 86%;            /* #ede4c8 – text-on-dark */

    --card: 138 17% 19%;                 /* #293a2e – ink-surface */
    --card-foreground: 45 51% 86%;
    --card-border: 135 19% 29%;           /* ink-high */
    --card-hover: 138 17% 22%;            /* slightly raised */

    --popover: 138 17% 19%;
    --popover-foreground: 45 51% 86%;

    /* ── Canvas variants (dark) ──────────────────────────────── */
    --canvas-warm: 136 18% 24%;
    --canvas-deep: 143 16% 15%;

    /* ── Woad (dark) ─────────────────────────────────────────── */
    --woad: 260 26% 62%;
    --woad-foreground: 0 0% 100%;
    --woad-light: 253 18% 70%;
    --woad-pale: 260 26% 62% / 0.1;

    /* ── Madder (dark) ───────────────────────────────────────── */
    --madder: 0 38% 62%;
    --madder-pale: 0 38% 62% / 0.12;

    /* ── Text hierarchy (dark) ───────────────────────────────── */
    --text-body: 120 10% 69%;
    --text-secondary: 129 11% 48%;
    --text-muted: 129 11% 48%;
    --text-ghost: 128 8% 38%;

    /* ── Secondary (ink-raised) ──────────────────────────────── */
    --secondary: 136 18% 24%;            /* #324838 – ink-raised */
    --secondary-foreground: 120 10% 69%; /* #a8b8a8 – text-on-dark-body */

    /* ── Muted (ink-deep) ────────────────────────────────────── */
    --muted: 143 16% 15%;               /* #212e26 – ink-deep */
    --muted-foreground: 129 11% 48%;    /* #6c8870 – text-dim */

    /* ── Accent (gilt on dark) ───────────────────────────────── */
    --accent: 44 56% 35%;               /* gilt-deep bg */
    --accent-foreground: 45 59% 63%;    /* gilt-light text */

    /* ── Semantic States (dark) ──────────────────────────────── */
    --success: 159 29% 52%;
    --success-foreground: 0 0% 100%;
    --warning: 45 59% 63%;
    --warning-foreground: 146 21% 13%;
    --destructive: 0 38% 62%;
    --destructive-foreground: 0 0% 100%;
    --info: 211 34% 56%;
    --info-foreground: 0 0% 100%;
    --special: 260 26% 62%;
    --special-foreground: 0 0% 100%;

    /* ── Cognac (dark) ───────────────────────────────────────── */
    --cognac: 21 45% 37%;
    --cognac-foreground: 0 0% 100%;
    --cognac-pale: 28 46% 78%;

    /* ── Gilt (dark) ─────────────────────────────────────────── */
    --gilt: 45 59% 63%;
    --gilt-light: 49 69% 81%;
    --gilt-deep: 45 50% 50%;

    /* ── Borders (ink-high) ──────────────────────────────────── */
    --border: 135 19% 29%;              /* #3c5843 – ink-high */
    --input: 135 19% 29%;
    --ring: 162 39% 39%;

    --chart-1: 162 39% 39%;
    --chart-2: 45 59% 63%;
    --chart-3: 21 45% 37%;
    --chart-4: 260 26% 62%;
    --chart-5: 0 38% 62%;

    /* ── Organization Category Colors (dark) ────────────────── */
    --org-ecosystem: 280 55% 62%;
    --org-ecosystem-foreground: 0 0% 100%;
    --org-ecosystem-light: 280 45% 18%;
    --org-academic: 210 65% 60%;
    --org-academic-foreground: 0 0% 100%;
    --org-academic-light: 210 50% 18%;
    --org-government: 195 60% 52%;
    --org-government-foreground: 0 0% 100%;
    --org-government-light: 195 50% 16%;
    --org-capital: 162 39% 39%;
    --org-capital-foreground: 0 0% 100%;
    --org-capital-light: 162 30% 18%;
    --org-corporate: 230 50% 60%;
    --org-corporate-foreground: 0 0% 100%;
    --org-corporate-light: 230 45% 18%;
    --org-wealth: 45 50% 50%;
    --org-wealth-foreground: 0 0% 100%;
    --org-wealth-light: 45 35% 18%;
    --org-platform: 15 70% 60%;
    --org-platform-foreground: 0 0% 100%;
    --org-platform-light: 15 60% 16%;
    --org-uncategorized: 340 60% 60%;
    --org-uncategorized-foreground: 0 0% 100%;
    --org-uncategorized-light: 340 50% 18%;

    /* ── Assessment Dimension Accents (dark) ──────────────────── */
    --dim-problem: 350 40% 60%;
    --dim-problem-light: 350 30% 18%;
    --dim-market: 200 45% 58%;
    --dim-market-light: 200 30% 18%;
    --dim-founder: 45 50% 50%;
    --dim-founder-light: 45 30% 18%;
    --dim-solution: 162 39% 39%;
    --dim-solution-light: 162 25% 18%;
    --dim-competitive: 270 30% 62%;
    --dim-competitive-light: 270 20% 18%;
    --dim-business: 240 22% 58%;
    --dim-business-light: 240 15% 18%;

    /* ── Evidence Strength Accents (dark) ─────────────────────── */
    --ev-behavior: 210 55% 58%;
    --ev-behavior-light: 210 35% 18%;
    --ev-data: 270 30% 62%;
    --ev-data-light: 270 20% 18%;
    --ev-commitment: 45 50% 50%;
    --ev-commitment-light: 45 30% 18%;
    --ev-revenue: 162 39% 39%;
    --ev-revenue-light: 162 35% 18%;

    /* ── Navbar (ink shell — same as background in dark) ──────── */
    --navbar: 146 21% 13%;
    --navbar-foreground: 45 51% 86%;

    /* ── Sidebar (darker ink) ────────────────────────────────── */
    --sidebar: 143 16% 15%;
    --sidebar-foreground: 45 51% 86%;
    --sidebar-primary: 162 39% 39%;
    --sidebar-primary-foreground: 146 21% 13%;
    --sidebar-accent: 44 56% 35%;
    --sidebar-accent-foreground: 45 59% 63%;
    --sidebar-border: 135 19% 29%;
    --sidebar-ring: 162 39% 39%;

    --shadow-2xs: 0 1px 2px 0 hsl(0 0% 0% / 0.1);
    --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.15);
    --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.15);
    --shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.15);
    --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.2), 0 2px 4px -2px hsl(0 0% 0% / 0.15);
    --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.25), 0 4px 6px -4px hsl(0 0% 0% / 0.15);
    --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.3), 0 8px 10px -6px hsl(0 0% 0% / 0.15);
    --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.4);
    /* Hard offset shadow for architectural canvas cards (dark mode) */
    --shadow-hard: 6px 6px 0px 0px hsl(45 51% 86% / 0.10);
  }
}

/* Brand v3 is intentionally scoped to public pages. The workspace and admin
   retain the established Cartographer's Study tokens and typography. */
.jiminy-public {
  --background: 40 33% 95%;
  --foreground: 235 28% 16%;
  --card: 40 33% 97%;
  --card-foreground: 235 28% 16%;
  --card-border: 132 10% 85%;
  --card-hover: 40 33% 98%;
  --popover: 40 33% 97%;
  --popover-foreground: 235 28% 16%;
  --primary: 178 48% 12%;
  --primary-foreground: 40 33% 95%;
  --primary-light: 160 35% 72%;
  --primary-dark: 178 48% 9%;
  --secondary: 174 46% 17%;
  --secondary-foreground: 40 33% 95%;
  --muted: 132 10% 88%;
  --muted-foreground: 162 10% 30%;
  --accent: 42 39% 59%;
  --accent-foreground: 178 48% 12%;
  --border: 132 10% 85%;
  --input: 132 10% 85%;
  --ring: 160 29% 60%;
  --gilt: 42 39% 59%;
  --gilt-light: 42 47% 70%;
  --gilt-deep: 42 39% 42%;
  --hero-ink: 40 33% 95%;
  --hero-soft: 132 10% 91%;
  --hero-lift: 132 10% 86%;
  --hero-paper: 235 28% 16%;
  --hero-muted: 162 8% 35%;
  --hero-deep: 162 8% 44%;
  --font-public-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-public-display: 'Libre Caslon Text', Georgia, serif;
  --font-public-mono: 'IBM Plex Mono', ui-monospace, monospace;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-public-sans);
  font-weight: 400;
}

.jiminy-public .font-sans { font-family: var(--font-public-sans); }
.jiminy-public .font-display { font-family: var(--font-public-display); }
.jiminy-public .font-mono { font-family: var(--font-public-mono); }

.jiminy-public-scrim {
  background: linear-gradient(90deg, hsl(178 48% 8% / 0.94) 0%, hsl(178 48% 8% / 0.72) 42%, hsl(178 48% 8% / 0.08) 76%);
}

@media (max-width: 767px) {
  .jiminy-public-scrim {
    background: linear-gradient(180deg, hsl(178 48% 8% / 0.08) 0%, hsl(178 48% 8% / 0.82) 68%, hsl(178 48% 8% / 0.98) 100%);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html, body, #root {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* ── Typography Hierarchy (Jiminy Type Scale v1) ──────────── */
  h1 { @apply font-display font-light tracking-tight text-foreground; font-size: 1.8rem; line-height: 1.05; letter-spacing: -0.01em; }
  h2 { @apply font-display font-normal text-foreground; font-size: 1.35rem; line-height: 1.1; }
  h3 { @apply font-display font-normal text-foreground; font-size: 1.2rem; line-height: 1.15; }
  h4 { @apply font-sans font-normal text-foreground; font-size: 0.82rem; line-height: 1.8; }
}

/* ═══════════════════════════════════════════════════════════════
 *  CENTRALIZED COMPONENT STYLES — @layer components
 *  All interactive patterns live here. Components reference these
 *  classes instead of inlining Tailwind. Single source of truth.
 * ═══════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Jiminy chat markdown rendering ─────────────────────────── */
  .jiminy-prose > :first-child { @apply mt-0; }
  .jiminy-prose > :last-child  { @apply mb-0; }
  .jiminy-prose p              { @apply my-2 leading-relaxed; }
  .jiminy-prose h1             { @apply mt-3 mb-2 text-base font-semibold; }
  .jiminy-prose h2             { @apply mt-3 mb-2 text-sm font-semibold; }
  .jiminy-prose h3,
  .jiminy-prose h4             { @apply mt-3 mb-1 text-sm font-semibold; }
  .jiminy-prose ul             { @apply my-2 list-disc pl-5 space-y-1; }
  .jiminy-prose ol             { @apply my-2 list-decimal pl-5 space-y-1; }
  .jiminy-prose li             { @apply leading-relaxed; }
  .jiminy-prose strong         { @apply font-semibold; }
  .jiminy-prose em             { @apply italic; }
  .jiminy-prose code           { @apply rounded bg-background/60 px-1 py-0.5 text-[0.8em] font-mono; }
  .jiminy-prose pre            { @apply my-2 overflow-x-auto rounded bg-background/60 p-2 text-xs; }
  .jiminy-prose pre code       { @apply bg-transparent p-0; }
  .jiminy-prose a              { @apply underline underline-offset-2; }
  .jiminy-prose hr             { @apply my-3 border-border; }
  .jiminy-prose blockquote     { @apply my-2 rounded-r border-l-2 border-[hsl(var(--gilt))] bg-[hsl(var(--gilt)/0.08)] py-1.5 pl-3 pr-2 text-xs italic text-muted-foreground; }
  .jiminy-prose blockquote p   { @apply my-0; }

  /* ── Markdown tables (PR A1) ─────────────────────────────────
     A table cannot shrink to fit, so the wrapper scrolls rather than the
     panel. Row identity is preserved by pinning the first column, and the
     overflow is signalled explicitly: macOS hides scrollbars by default, so
     without a persistent bar the only cue that content continues is absent
     and a clipped cell reads as a bug. */
  .jiminy-prose .jiminy-table-wrap { @apply relative my-2 max-w-full; }

  .jiminy-prose .jiminy-table-scroll { @apply max-w-full overflow-x-auto; }
  .jiminy-prose .jiminy-table-scroll:focus-visible {
    outline: none;
    border-radius: 3px;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
  }

  /* Persistent scrollbar — only on a container that is actually overflowing,
     so tables that fit gain no chrome. */
  .jiminy-prose .jiminy-table-scroll[data-overflowing='true'] {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }
  .jiminy-prose .jiminy-table-scroll[data-overflowing='true']::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
  }
  .jiminy-prose .jiminy-table-scroll[data-overflowing='true']::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: hsl(var(--border));
  }
  .jiminy-prose .jiminy-table-scroll[data-overflowing='true']::-webkit-scrollbar-track {
    background-color: hsl(var(--muted));
    border-radius: 4px;
  }

  .jiminy-prose .jiminy-table       { @apply w-max min-w-full border-collapse text-xs; }
  .jiminy-prose .jiminy-table thead { @apply border-b border-border; }
  .jiminy-prose .jiminy-table th    { @apply px-2 py-1.5 text-left align-bottom font-semibold; }
  .jiminy-prose .jiminy-table td    { @apply border-t border-border/60 px-2 py-1.5 align-top; }
  .jiminy-prose .jiminy-table tbody th { @apply border-t border-border/60 align-top; }

  /* Pinned first column. The background MUST be opaque — a translucent sticky
     column shows the scrolling content sliding beneath it, which is worse than
     no pinning at all. */
  .jiminy-prose .jiminy-table__sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: hsl(var(--card));
    box-shadow: 1px 0 0 0 hsl(var(--border));
  }

  /* Edge affordance. Present only while there is content beyond that edge, so
     it disappears at the scrolled-to end rather than implying more content.
     Sits below the sticky column's z-index so it never washes over the label. */
  .jiminy-prose .jiminy-table-wrap::before,
  .jiminy-prose .jiminy-table-wrap::after {
    content: '';
    @apply pointer-events-none absolute top-0 bottom-2 w-6 opacity-0;
    z-index: 1;
    transition: opacity 150ms ease;
  }
  .jiminy-prose .jiminy-table-wrap::before {
    left: 0;
    background: linear-gradient(to right, hsl(var(--card)), transparent);
  }
  .jiminy-prose .jiminy-table-wrap::after {
    right: 0;
    background: linear-gradient(to left, hsl(var(--card)), transparent);
  }
  .jiminy-prose .jiminy-table-wrap:has(
      .jiminy-table-scroll[data-edge-start='true']
    )::before { @apply opacity-100; }
  .jiminy-prose .jiminy-table-wrap:has(
      .jiminy-table-scroll[data-edge-end='true']
    )::after { @apply opacity-100; }

  /* Stacked view — one labelled block per row, below the container breakpoint.
     Table semantics are retained (see JiminyTable); this is appearance only. */
  .jiminy-prose .jiminy-table--stacked { @apply block w-full min-w-0; }
  .jiminy-prose .jiminy-table--stacked tbody { @apply block; }
  .jiminy-prose .jiminy-table--stacked tr {
    @apply mt-2 block rounded-[3px] border border-border/60 px-2 py-1.5 first:mt-0;
  }
  .jiminy-prose .jiminy-table--stacked th.jiminy-table__rowhead {
    @apply block border-0 px-0 py-0 pb-1 font-semibold;
  }
  .jiminy-prose .jiminy-table--stacked td {
    @apply flex gap-2 border-0 px-0 py-0.5;
  }
  .jiminy-prose .jiminy-table__label {
    @apply w-[9rem] flex-shrink-0 text-muted-foreground;
  }
  .jiminy-prose .jiminy-table__value { @apply min-w-0 flex-1 break-words; }

  @media (prefers-reduced-motion: reduce) {
    .jiminy-prose .jiminy-table-wrap::before,
    .jiminy-prose .jiminy-table-wrap::after {
      transition: none;
    }
  }



  /* ── Form Field Base (Input, Textarea, Select) ─────────────── */
  .jiminy-field {
    @apply w-full rounded-[3px] border-[1.5px] border-border bg-card
           font-light text-foreground antialiased
           ring-offset-background transition-[border-color,box-shadow] duration-150;
    font-size: 0.82rem;
    line-height: 1.8;
    &::placeholder {
      color: hsl(var(--text-ghost));
      font-weight: 300;
    }
    &:hover:not(:disabled) {
      border-color: hsl(33 12% 78%);
    }
    &:focus-visible {
      outline: none;
      border-color: hsl(var(--primary));
      box-shadow: 0 0 0 3px hsl(162 39% 39% / 0.12);
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  /* ── Form Label ────────────────────────────────────────────── */
  .jiminy-label {
    @apply font-medium uppercase
           text-muted-foreground leading-none;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    &:has(+ :disabled), &.peer-disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }
  }

  /* ── Floating Overlay Surface (Dropdown, Popover, etc.) ───── */
  .jiminy-overlay-surface {
    @apply z-50 min-w-[180px] overflow-hidden rounded-[4px]
           border-[1.5px] border-card-border bg-card py-1.5
           text-card-foreground;
    box-shadow: 0 8px 24px hsl(146 21% 13% / 0.12),
                0 2px 6px hsl(146 21% 13% / 0.06);
  }

  /* ── Menu Item (Dropdown, Context, Command) ────────────────── */
  .jiminy-menu-item {
    @apply relative flex cursor-pointer select-none items-center
           gap-2.5 px-3.5 py-2 text-[0.72rem] font-normal
           text-secondary-foreground outline-none
           transition-colors duration-100;
    &:focus, &:hover {
      @apply bg-background;
    }
    &[data-disabled] {
      pointer-events: none;
      opacity: 0.5;
    }
  }

  /* ── Menu Section Label ────────────────────────────────────── */
  .jiminy-menu-label {
    @apply px-3.5 py-2 pb-1 text-[0.52rem] font-semibold uppercase
           tracking-[0.16em] text-muted-foreground;
  }

  /* ── Menu Separator ────────────────────────────────────────── */
  .jiminy-menu-separator {
    @apply my-1 h-px bg-card-border;
  }

  /* ── Tooltip ───────────────────────────────────────────────── */
  .jiminy-tooltip {
    @apply z-50 overflow-hidden rounded-[3px] bg-foreground
           border border-sidebar-border px-2.5 py-[5px]
           text-[0.62rem] font-light;
    color: hsl(var(--on-dark-body));
    box-shadow: 0 4px 12px hsl(0 0% 0% / 0.2);
  }

  /* ── Switch Track ──────────────────────────────────────────── */
  .jiminy-switch-track {
    @apply inline-flex h-[22px] w-[38px] shrink-0 cursor-pointer
           items-center rounded-full border-[1.5px] border-transparent
           transition-colors duration-200 ease-in-out;
    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
    &[data-state="checked"] { @apply bg-primary; }
    &[data-state="unchecked"] { @apply bg-muted; }
  }

  /* ── Switch Thumb ──────────────────────────────────────────── */
  .jiminy-switch-thumb {
    @apply pointer-events-none block h-4 w-4 rounded-full bg-white
           ring-0 transition-transform duration-200 ease-in-out;
    box-shadow: 0 1px 3px hsl(0 0% 0% / 0.15);
    &[data-state="checked"] { transform: translateX(1rem); }
    &[data-state="unchecked"] { transform: translateX(0); }
  }

  /* ── Progress Track ────────────────────────────────────────── */
  .jiminy-progress-track {
    @apply relative h-1 w-full overflow-hidden rounded-[2px] bg-muted;
  }

  /* ── Progress Fill ─────────────────────────────────────────── */
  .jiminy-progress-fill {
    @apply h-full w-full flex-1 rounded-[2px] bg-primary transition-all;
    transition-duration: 400ms;
  }

  /* ── Card Surface ──────────────────────────────────────────── */
  .jiminy-card {
    @apply rounded-[var(--radius)] border border-card-border bg-card
           text-card-foreground shadow-sm transition-all ease-in-out;
    transition-duration: 220ms;
    &:hover {
      @apply shadow-md -translate-y-0.5 border-border;
    }
  }

  /* ── Badge Base ────────────────────────────────────────────── */
  .jiminy-badge {
    @apply inline-flex items-center gap-[0.3rem] rounded-[2px] border
           px-2 py-[3px] text-[0.52rem] font-medium uppercase
           tracking-[0.1em] leading-none whitespace-nowrap
           transition-colors;
    &:focus {
      @apply outline-none ring-2 ring-ring ring-offset-2;
    }
  }

  /* ── Sidebar Section Heading ───────────────────────────────── */
  .jiminy-sidebar-heading {
    @apply font-semibold uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: hsl(var(--on-dark-body));
  }

  /* ── Sidebar Entity Label (Startups, Ideas names) ──────────── */
  .jiminy-sidebar-entity {
    @apply font-display font-normal;
    font-size: 0.88rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: hsl(var(--on-dark-primary));
  }

  /* ── Sidebar Utility Label (nav items) ─────────────────────── */
  .jiminy-sidebar-label {
    @apply font-normal;
    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: hsl(var(--on-dark-body));
  }

  /* ── Sidebar Child Items (sub-nav) ─────────────────────────── */
  .jiminy-sidebar-child {
    @apply font-light;
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: hsl(var(--on-dark-body));
  }

  /* ── Nav Item (top header bar) ─────────────────────────────── */
  .jiminy-nav-item {
    @apply font-normal uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: hsl(var(--on-dark-body));
  }
  .jiminy-nav-item.active, .jiminy-nav-item[data-active="true"] {
    @apply font-medium;
    color: hsl(var(--on-dark-primary));
  }

  /* ── Eyebrow (page-level section label on canvas) ──────────── */
  .jiminy-eyebrow {
    @apply font-semibold uppercase text-muted-foreground;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
  }

  /* ── Body Text Variants ────────────────────────────────────── */
  .jiminy-body-lg {
    @apply font-light;
    font-size: 0.82rem;
    line-height: 1.8;
    color: hsl(var(--text-body));
  }
  .jiminy-body {
    @apply font-light;
    font-size: 0.75rem;
    line-height: 1.75;
    color: hsl(var(--text-secondary));
  }
  .jiminy-meta {
    @apply font-light;
    font-size: 0.65rem;
    line-height: 1.5;
    color: hsl(var(--text-muted));
  }

  /* ── CTA Link ──────────────────────────────────────────────── */
  .jiminy-cta-link {
    @apply font-medium uppercase text-primary;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  /* ── Sidebar Active State ──────────────────────────────────── */
  .jiminy-sidebar-active {
    color: hsl(var(--on-dark-primary));
  }
  .jiminy-sidebar-active .jiminy-sidebar-entity,
  .jiminy-sidebar-active .jiminy-sidebar-label {
    color: hsl(var(--on-dark-primary));
  }
}

@layer utilities {
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Confetti animation for celebrations */
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(400px) rotate(720deg);
    opacity: 0;
  }
}

/* Score pulse animation */
@keyframes score-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-score-pulse {
  animation: score-pulse 0.5s ease-in-out;
}

/* Shimmer effect for loading states */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 0%,
    hsl(var(--background)) 50%,
    hsl(var(--muted)) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Glow effect for highlighted elements */
.glow-primary {
  box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
}

.glow-success {
  box-shadow: 0 0 20px hsl(var(--success) / 0.3);
}

/* ── Jiminy Landing Page Animations ──────────────────────────── */
@keyframes jiminy-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes jiminy-line-grow {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes jiminy-scroll-pulse {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* Grain overlay for Jiminy landing */
.jiminy-grain::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 50;
  opacity: 0.6;
}

/* ── Jiminy proactive dot pulse (architecture §6.4) ──────────── */
@keyframes jiminy-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 hsl(var(--gilt) / 0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 0 6px hsl(var(--gilt) / 0);
  }
}
.jiminy-dot-pending {
  animation: jiminy-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Ecosystem Intelligence page — mist backdrop drift (2026-09-23) */
@keyframes ei-mist-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(48px); }
}
.ei-mist-drift {
  animation: ei-mist-drift 90s ease-in-out infinite;
}
.ei-mist-drift-slow {
  animation: ei-mist-drift 130s ease-in-out infinite reverse;
}
@media (prefers-reduced-motion: reduce) {
  .ei-mist-drift,
  .ei-mist-drift-slow {
    animation: none;
  }
}