@import "tailwindcss";

/* ─── Light theme — warm cream, not pure white ─── */
:root,
html.light {
  color-scheme: light;

  /* ── Semantic palette ── */
  --background:          #f0ece5;   /* warm cream base */
  --foreground:          #1c1916;
  --card:                #ebe7e0;
  --card-foreground:     #1c1916;
  --popover:             #f5f2ec;
  --popover-foreground:  #1c1916;
  --primary:             #1c1916;
  --primary-foreground:  #f0ece5;
  --secondary:           #e5e0d8;
  --secondary-foreground:#1c1916;
  --muted:               #e2ddd5;
  --muted-foreground:    #6b6459;
  --accent:              #e5e0d8;
  --accent-foreground:   #1c1916;
  --destructive:         #dc2626;
  --destructive-foreground: #f0ece5;
  --border:              #d8d2c8;
  --input:               #d8d2c8;
  --ring:                #1c1916;
  --sidebar:             #e8e3db;
  --sidebar-accent:      #dfd9d0;
  --sidebar-border:      #d0cabf;
  --sidebar-foreground:  #1c1916;

  /* ── THE KEY TRICK ──────────────────────────────────────────────────────
     Every text-white/X, border-white/X and bg-white/X in the codebase
     uses var(--color-white) internally. By re-mapping white → warm-dark
     we get ALL those utilities for free — no component changes needed.
  ─────────────────────────────────────────────────────────────────────── */
  --color-white: #1c1916;
  --color-black: #f0ece5;
  --font-system-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-system-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ─── Dark theme ─── */
html.dark {
  color-scheme: dark;

  /* ── CRITICAL: restore white/black to their true values in dark mode.
     :root sets --color-white to dark-brown for the light theme trick,
     so dark mode MUST explicitly reset them back to real white/black.
  ── */
  --color-white: oklch(1 0 0);
  --color-black: oklch(0 0 0);

  --background: #09090b;
  --foreground: #fafafa;
  --card: #0c0c0f;
  --card-foreground: #fafafa;
  --popover: #0c0c0f;
  --popover-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #171717;
  --secondary: #1c1c20;
  --secondary-foreground: #fafafa;
  --muted: #1c1c20;
  --muted-foreground: #a1a1aa;
  --accent: #1c1c20;
  --accent-foreground: #fafafa;
  --destructive: #dc2626;
  --destructive-foreground: #fafafa;
  --border: #1e1e23;
  --input: #1e1e23;
  --ring: #d4d4d8;
  --sidebar: #0a0a0d;
  --sidebar-accent: #141418;
  --sidebar-border: #1e1e23;
  --sidebar-foreground: #fafafa;
}

@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark) {
    color-scheme: dark;

    /* Same reset needed for system-dark users */
    --color-white: oklch(1 0 0);
    --color-black: oklch(0 0 0);

    --background: #09090b;
    --foreground: #fafafa;
    --card: #0c0c0f;
    --card-foreground: #fafafa;
    --popover: #0c0c0f;
    --popover-foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #171717;
    --secondary: #1c1c20;
    --secondary-foreground: #fafafa;
    --muted: #1c1c20;
    --muted-foreground: #a1a1aa;
    --accent: #1c1c20;
    --accent-foreground: #fafafa;
    --destructive: #dc2626;
    --destructive-foreground: #fafafa;
    --border: #1e1e23;
    --input: #1e1e23;
    --ring: #d4d4d8;
    --sidebar: #0a0a0d;
    --sidebar-accent: #141418;
    --sidebar-border: #1e1e23;
    --sidebar-foreground: #fafafa;
  }
}

/* ─── Light mode: hard-coded dark bg + pastel text overrides ────────────────
   Dark arbitrary Tailwind values bypass CSS variables; target them directly.
   Pastel text colours (designed for dark backgrounds) are remapped to their
   -700 equivalents so they stay readable on the warm cream background.
────────────────────────────────────────────────────────────────────────── */
html.light {

  /* ── Page / shell backgrounds ─────────────────────────────────────────── */
  .bg-\[\#0a0a0d\], .bg-\[\#09090b\], .bg-\[\#06060a\],
  .bg-\[\#0c0b0f\], .bg-\[\#0d0c10\], .bg-\[\#050508\], .bg-\[\#070709\] {
    background-color: var(--background) !important;
  }
  .bg-\[\#0a0a0d\]\/80  { background-color: color-mix(in srgb, var(--background) 80%, transparent) !important; }
  .bg-\[\#0a0a0d\]\/95  { background-color: color-mix(in srgb, var(--background) 95%, transparent) !important; }

  /* ── Card surfaces ────────────────────────────────────────────────────── */
  .bg-\[\#0e0c15\], .bg-\[\#0d0c13\], .bg-\[\#0c0a18\], .bg-\[\#0d0b17\],
  .bg-\[\#0e0e12\], .bg-\[\#0e0f16\], .bg-\[\#0f0d17\], .bg-\[\#111116\],
  .bg-\[\#111318\], .bg-\[\#1a1208\], .bg-\[\#1a1c22\], .bg-\[\#1e2028\] {
    background-color: var(--card) !important;
  }
  .bg-\[\#0c0a18\]\/90,
  .bg-\[\#0d0b17\]\/85,
  .bg-\[\#0f0d17\]\/82, .bg-\[\#0f0d17\]\/84, .bg-\[\#0f0d17\]\/86,
  .bg-\[\#111318\]\/80,
  .bg-\[\#1a1c22\]\/80, .bg-\[\#1a1c22\]\/95,
  .bg-\[\#1e2028\]\/80  { background-color: var(--card) !important; }

  /* ── Modal / overlay surfaces ─────────────────────────────────────────── */
  .bg-\[\#0d0b18\], .bg-\[\#0e0c1a\], .bg-\[\#111019\],
  .bg-\[\#12101e\], .bg-\[\#181622\], .bg-\[\#110f1a\], .bg-\[\#14121e\] {
    background-color: var(--popover) !important;
  }
  .bg-\[\#0d0b18\]\/70  { background-color: color-mix(in srgb, var(--popover) 70%, transparent) !important; }
  .bg-\[\#111019\]\/86  { background-color: var(--popover) !important; }

  /* ── Gradient card backgrounds ────────────────────────────────────────── */
  [class*="rgba(124,58,237"]  { background: radial-gradient(circle at top left, rgba(124,58,237,.08), var(--card) 55%) !important; }
  [class*="rgba(139,92,246"]  { background: radial-gradient(ellipse at top left, rgba(139,92,246,.08), var(--card) 55%) !important; }
  [class*="rgba(14,165,233"]  { background: radial-gradient(ellipse at top left, rgba(14,165,233,.08), var(--card) 55%) !important; }
  [class*="rgba(245,158,11"]  { background: radial-gradient(ellipse at top left, rgba(245,158,11,.07), var(--card) 55%) !important; }
  [class*="rgba(16,185,129"]  { background: radial-gradient(ellipse at top left, rgba(16,185,129,.07), var(--card) 55%) !important; }
  [class*="rgba(244,63,94"]   { background: radial-gradient(ellipse at top left, rgba(244,63,94,.07),  var(--card) 55%) !important; }
  [class*="rgba(251,113,133"] { background: radial-gradient(ellipse at top left, rgba(244,63,94,.07),  var(--card) 55%) !important; }
  [class*="rgba(99,102,241"]  { background: radial-gradient(ellipse at top left, rgba(99,102,241,.07), var(--card) 55%) !important; }
  [class*="rgba(10,8,18"],
  [class*="rgba(9,8,15"]      { background: var(--card) !important; }

  /* ── Pastel text → dark-mode-only colours remapped to readable -700 ──── */
  /*
     text-*-200/300/400 are designed for dark backgrounds.
     In light mode we swap them to their -700 siblings (same hue, much darker).
     Opacity variants are also listed so /60 etc. don't slip through.
     We do NOT touch text-*-500 and above — those are already dark enough.
     dark:text-*-300 generates the class "dark:text-*-300" (with colon),
     which is a different class name and is therefore unaffected by these rules.
  */

  /* violet ---------------------------------------------------------------- */
  .text-violet-200, .text-violet-300, .text-violet-400,
  .text-violet-200\/40, .text-violet-200\/45, .text-violet-200\/60, .text-violet-200\/70,
  .text-violet-300\/45, .text-violet-300\/50, .text-violet-300\/55,
  .text-violet-300\/60, .text-violet-300\/65, .text-violet-300\/70, .text-violet-300\/80,
  .text-violet-400\/40, .text-violet-400\/50, .text-violet-400\/60, .text-violet-400\/70, .text-violet-400\/80 {
    color: #6d28d9 !important;
  }

  /* amber ----------------------------------------------------------------- */
  .text-amber-200, .text-amber-300, .text-amber-400,
  .text-amber-200\/48, .text-amber-200\/55, .text-amber-200\/60, .text-amber-200\/70, .text-amber-200\/80,
  .text-amber-300\/50, .text-amber-300\/55, .text-amber-300\/60, .text-amber-300\/65,
  .text-amber-300\/70, .text-amber-300\/80, .text-amber-300\/90,
  .text-amber-400\/40, .text-amber-400\/60, .text-amber-400\/70, .text-amber-400\/75, .text-amber-400\/80 {
    color: #b45309 !important;
  }

  /* emerald --------------------------------------------------------------- */
  .text-emerald-200, .text-emerald-300, .text-emerald-400,
  .text-emerald-200\/70, .text-emerald-200\/75,
  .text-emerald-300\/45, .text-emerald-300\/50, .text-emerald-300\/55,
  .text-emerald-300\/60, .text-emerald-300\/65, .text-emerald-300\/70, .text-emerald-300\/80,
  .text-emerald-400\/45, .text-emerald-400\/50, .text-emerald-400\/60, .text-emerald-400\/65, .text-emerald-400\/70 {
    color: #047857 !important;
  }

  /* sky ------------------------------------------------------------------- */
  .text-sky-200, .text-sky-300, .text-sky-400,
  .text-sky-200\/30, .text-sky-200\/35, .text-sky-200\/45, .text-sky-200\/50, .text-sky-200\/60, .text-sky-200\/80,
  .text-sky-300\/50, .text-sky-300\/55, .text-sky-300\/60, .text-sky-300\/70, .text-sky-300\/80, .text-sky-300\/95,
  .text-sky-400\/40, .text-sky-400\/50, .text-sky-400\/60, .text-sky-400\/70 {
    color: #0369a1 !important;
  }

  /* indigo ---------------------------------------------------------------- */
  .text-indigo-200, .text-indigo-300, .text-indigo-400,
  .text-indigo-300\/70, .text-indigo-300\/80,
  .text-indigo-400\/40, .text-indigo-400\/50, .text-indigo-400\/60, .text-indigo-400\/80 {
    color: #4338ca !important;
  }

  /* rose ------------------------------------------------------------------ */
  .text-rose-200, .text-rose-300, .text-rose-400,
  .text-rose-200\/60,
  .text-rose-300\/50, .text-rose-300\/55, .text-rose-300\/70, .text-rose-300\/80,
  .text-rose-400\/70, .text-rose-400\/75 {
    color: #be123c !important;
  }

  /* teal ------------------------------------------------------------------ */
  .text-teal-200, .text-teal-300, .text-teal-400,
  .text-teal-300\/70, .text-teal-300\/80,
  .text-teal-400\/50, .text-teal-400\/60 {
    color: #0f766e !important;
  }

  /* blue ------------------------------------------------------------------ */
  .text-blue-200, .text-blue-300, .text-blue-400,
  .text-blue-300\/80 {
    color: #1d4ed8 !important;
  }

  /* pink ------------------------------------------------------------------ */
  .text-pink-200, .text-pink-300, .text-pink-400 {
    color: #be185d !important;
  }

  /* ── Journal editor text ─────────────────────────────────────────────── */
  .journal-editor,
  .journal-editor p,
  .journal-editor ul,
  .journal-editor ol { color: rgba(20,20,30,0.78); }
  .journal-editor h1, .journal-editor h2, .journal-editor h3 { color: rgba(10,10,20,0.90); }
  .journal-editor strong { color: rgba(10,10,20,0.95); }
  .journal-editor { caret-color: #059669; }
  .journal-editor p.is-editor-empty:first-child::before { color: rgba(20,20,30,0.25); }

  /* ── Scrollbar tint ─────────────────────────────────────────────────── */
  ::-webkit-scrollbar-thumb { background: #c4bdb3; }
  ::-webkit-scrollbar-thumb:hover { background: #a89f94; }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --font-sans: var(--font-system-sans);
  --font-mono: var(--font-system-mono);
}

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-system-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection color */
::selection {
  background: #6366f130;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* Tiptap editor styles */
.tiptap p.is-editor-empty:first-child::before {
  color: var(--muted-foreground);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.tiptap:focus-visible {
  outline: none;
}

/* Journal editor — larger, looser text */
.journal-editor {
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255,255,255,0.75);
  caret-color: rgba(52,211,153,0.8);
}

.journal-editor p {
  margin-bottom: 0.9em;
  color: rgba(255,255,255,0.72);
}

.journal-editor h1,
.journal-editor h2,
.journal-editor h3 {
  color: rgba(255,255,255,0.88);
  font-weight: 700;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

.journal-editor ul,
.journal-editor ol {
  padding-left: 1.4em;
  color: rgba(255,255,255,0.65);
}

.journal-editor li { margin-bottom: 0.3em; }

.journal-editor strong { color: rgba(255,255,255,0.92); }

.journal-editor p.is-editor-empty:first-child::before {
  color: rgba(255,255,255,0.18);
  font-style: italic;
}