/* Design tokens — single source of truth for visual language. */

/* Caveat — handwritten font used by the "Esquisse" theme.
   Bundled locally (assets/css/fonts/) under the SIL Open Font License
   (see LICENSE.txt next to the .woff2 files). NOT loaded from Google
   Fonts at runtime: the app must work on a LAN with no internet, and
   third-party tracking would defeat the privacy posture. The two
   subsets together (latin + latin-ext) cover French + most European
   languages at ~67 KB total.
   `font-display: swap` so the rest of the UI doesn't flash blank
   while the font is decoded — the fallback (`cursive`) renders first
   and Caveat swaps in once ready, which on a LAN is essentially
   instantaneous. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* Palette — dark first, accent in calm blue. */
  --c-bg-0:      #0b0d12;    /* app background */
  --c-bg-1:      #11141b;    /* panels */
  --c-bg-2:      #171b24;    /* raised surfaces */
  --c-bg-3:      #1f2431;    /* hover / active */
  --c-border:    #262b38;
  --c-border-strong: #333a4d;

  --c-text:      #e8ebf2;
  --c-text-soft: #aab0c0;
  --c-text-dim:  #6b7283;

  --c-accent:       #5b8cff;
  --c-accent-soft:  #7ea3ff;
  --c-accent-weak:  rgba(91, 140, 255, 0.14);
  --c-accent-ring:  rgba(91, 140, 255, 0.35);

  --c-success:   #3ccf8f;
  --c-warning:   #f5b454;
  --c-danger:    #f26d6d;

  /* Bubble colors. The `--c-bubble-*` vars are what the bubble rules read.
     They default to the theme tokens; the prefs module overrides them on
     a per-thread basis by setting these on .thread-pane (cascade to bubbles). */
  --c-bubble-mine:         var(--c-accent);
  --c-bubble-mine-text:    #0a1223;
  --c-bubble-theirs:       var(--c-bg-2);
  --c-bubble-theirs-text:  var(--c-text);
  --c-bubble-mine-border:  transparent;
  --c-bubble-theirs-border: var(--c-border);

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Typography. The `--app-text-scale` multiplier is set by prefs.applyAppPrefs;
     its default of 1 makes this transparent when prefs are untouched. Each
     `--fs-*` token applies the scale once via calc, so a single knob retunes
     the whole visual language. */
  --font-sans: ui-sans-serif, system-ui, 'Segoe UI', 'Inter', -apple-system, 'Roboto', sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
  --app-text-scale: 1;
  --app-emoji-scale: 1.4;
  --fs-xs: calc(11px * var(--app-text-scale));
  --fs-sm: calc(13px * var(--app-text-scale));
  --fs-md: calc(14px * var(--app-text-scale));
  --fs-lg: calc(16px * var(--app-text-scale));
  --fs-xl: calc(20px * var(--app-text-scale));
  --fs-2xl: calc(28px * var(--app-text-scale));
  --lh-tight: 1.2;
  --lh-normal: 1.5;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
}

/* --- Dark theme --- mirrors :root so a per-thread `data-theme="dark"`
   override actually re-applies the dark palette inside a sub-tree whose
   ancestor is using a different theme (e.g. app set to "light", but a
   single discussion forced to "dark"). Without this rule the tokens would
   stay inherited from the ancestor theme — which is the bug that made
   "thème de la discussion = sombre" silently no-op when "thème général"
   was anything other than dark. */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --c-bg-0:      #0b0d12;
  --c-bg-1:      #11141b;
  --c-bg-2:      #171b24;
  --c-bg-3:      #1f2431;
  --c-border:    #262b38;
  --c-border-strong: #333a4d;
  --c-text:      #e8ebf2;
  --c-text-soft: #aab0c0;
  --c-text-dim:  #6b7283;
  --c-accent:       #5b8cff;
  --c-accent-soft:  #7ea3ff;
  --c-accent-weak:  rgba(91, 140, 255, 0.14);
  --c-accent-ring:  rgba(91, 140, 255, 0.35);
  --c-bubble-mine:         var(--c-accent);
  --c-bubble-mine-text:    #0a1223;
  --c-bubble-theirs:       var(--c-bg-2);
  --c-bubble-theirs-text:  var(--c-text);
  --c-bubble-theirs-border: var(--c-border);
}

/* --- Light theme --- */
:root[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;
  --c-bg-0: #f4f6fb;
  --c-bg-1: #ffffff;
  --c-bg-2: #eef1f7;
  --c-bg-3: #e1e6f0;
  --c-border: #d4dae6;
  --c-border-strong: #bcc4d4;
  --c-text: #1b1f29;
  --c-text-soft: #4a5060;
  --c-text-dim: #7a8092;
  --c-accent: #3a6ff0;
  --c-accent-soft: #5d8bff;
  --c-accent-weak: rgba(58, 111, 240, 0.12);
  --c-accent-ring: rgba(58, 111, 240, 0.30);
  --c-bubble-mine: #3a6ff0;
  --c-bubble-mine-text: #ffffff;
  --c-bubble-theirs: #ffffff;
  --c-bubble-theirs-text: #1b1f29;
  --c-bubble-theirs-border: #d4dae6;
}

/* --- "Paper" theme — warm beige reminiscent of a notebook. */
:root[data-theme="paper"],
[data-theme="paper"] {
  color-scheme: light;
  --c-bg-0: #f3ecdc;
  --c-bg-1: #faf3e2;
  --c-bg-2: #f1e7cd;
  --c-bg-3: #e6d9b6;
  --c-border: #d6c79f;
  --c-border-strong: #b9a373;
  --c-text: #3a2f1f;
  --c-text-soft: #6b5b3f;
  --c-text-dim: #8c7a55;
  --c-accent: #b86b3e;
  --c-accent-soft: #d28958;
  --c-accent-weak: rgba(184, 107, 62, 0.14);
  --c-accent-ring: rgba(184, 107, 62, 0.30);
  --c-bubble-mine: #b86b3e;
  --c-bubble-mine-text: #fff7e8;
  --c-bubble-theirs: #faf3e2;
  --c-bubble-theirs-text: #3a2f1f;
  --c-bubble-theirs-border: #d6c79f;
}

/* --- "Midnight" theme — deep indigo, violet accent. */
:root[data-theme="midnight"],
[data-theme="midnight"] {
  color-scheme: dark;
  --c-bg-0: #0a0817;
  --c-bg-1: #110f25;
  --c-bg-2: #1a1736;
  --c-bg-3: #251f4a;
  --c-border: #2c2856;
  --c-border-strong: #3d3870;
  --c-text: #ece8ff;
  --c-text-soft: #b1adcf;
  --c-text-dim: #6c6890;
  --c-accent: #9a6cff;
  --c-accent-soft: #b690ff;
  --c-accent-weak: rgba(154, 108, 255, 0.16);
  --c-accent-ring: rgba(154, 108, 255, 0.38);
  --c-bubble-mine: #9a6cff;
  --c-bubble-mine-text: #15102a;
  --c-bubble-theirs: #1a1736;
  --c-bubble-theirs-text: #ece8ff;
  --c-bubble-theirs-border: #2c2856;
}

/* --- "Forest" theme — deep evergreen, emerald accent. */
:root[data-theme="forest"],
[data-theme="forest"] {
  color-scheme: dark;
  --c-bg-0: #0c1612;
  --c-bg-1: #121e19;
  --c-bg-2: #182824;
  --c-bg-3: #213830;
  --c-border: #2a4a3c;
  --c-border-strong: #3a6450;
  --c-text: #e6f1ea;
  --c-text-soft: #a8bdb1;
  --c-text-dim: #6b8478;
  --c-accent: #3ccf8f;
  --c-accent-soft: #65dca7;
  --c-accent-weak: rgba(60, 207, 143, 0.14);
  --c-accent-ring: rgba(60, 207, 143, 0.34);
  --c-bubble-mine: #3ccf8f;
  --c-bubble-mine-text: #0c1612;
  --c-bubble-theirs: #182824;
  --c-bubble-theirs-text: #e6f1ea;
  --c-bubble-theirs-border: #2a4a3c;
}

/* --- "Sand" theme — soft sand, terracotta accent. Light. */
:root[data-theme="sand"],
[data-theme="sand"] {
  color-scheme: light;
  --c-bg-0: #f7f0e3;
  --c-bg-1: #fdf7ec;
  --c-bg-2: #f1e7d3;
  --c-bg-3: #e4d5b7;
  --c-border: #d6c39a;
  --c-border-strong: #b89e6c;
  --c-text: #3d2f1f;
  --c-text-soft: #6e5a3f;
  --c-text-dim: #97825a;
  --c-accent: #c25c3f;
  --c-accent-soft: #d77b58;
  --c-accent-weak: rgba(194, 92, 63, 0.14);
  --c-accent-ring: rgba(194, 92, 63, 0.32);
  --c-bubble-mine: #c25c3f;
  --c-bubble-mine-text: #fff5ea;
  --c-bubble-theirs: #fdf7ec;
  --c-bubble-theirs-text: #3d2f1f;
  --c-bubble-theirs-border: #d6c39a;
}

/* --- "Ocean" theme — turquoise water, teal accent. Light. */
:root[data-theme="ocean"],
[data-theme="ocean"] {
  color-scheme: light;
  --c-bg-0: #eaf4f6;
  --c-bg-1: #f6fbfc;
  --c-bg-2: #dcecf0;
  --c-bg-3: #c6dde2;
  --c-border: #aacfd6;
  --c-border-strong: #7eb4be;
  --c-text: #0e2a32;
  --c-text-soft: #355961;
  --c-text-dim: #5e8088;
  --c-accent: #0c8896;
  --c-accent-soft: #2aa3b1;
  --c-accent-weak: rgba(12, 136, 150, 0.14);
  --c-accent-ring: rgba(12, 136, 150, 0.32);
  --c-bubble-mine: #0c8896;
  --c-bubble-mine-text: #f6fbfc;
  --c-bubble-theirs: #f6fbfc;
  --c-bubble-theirs-text: #0e2a32;
  --c-bubble-theirs-border: #aacfd6;
}

/* --- "Rose" theme — pale rosé, magenta accent. Light. */
:root[data-theme="rose"],
[data-theme="rose"] {
  color-scheme: light;
  --c-bg-0: #fbeef1;
  --c-bg-1: #fff7fa;
  --c-bg-2: #f7e0e6;
  --c-bg-3: #ecc6d0;
  --c-border: #e0aebb;
  --c-border-strong: #c98599;
  --c-text: #3a1d27;
  --c-text-soft: #6b4252;
  --c-text-dim: #936378;
  --c-accent: #c9347a;
  --c-accent-soft: #dc5b97;
  --c-accent-weak: rgba(201, 52, 122, 0.14);
  --c-accent-ring: rgba(201, 52, 122, 0.32);
  --c-bubble-mine: #c9347a;
  --c-bubble-mine-text: #fff7fa;
  --c-bubble-theirs: #fff7fa;
  --c-bubble-theirs-text: #3a1d27;
  --c-bubble-theirs-border: #e0aebb;
}

/* --- "MSN" theme — early-2000s Windows Live Messenger nostalgia.
   Vivid blues, rounded bubbles with thicker borders, Segoe UI / Tahoma
   typeface for the Windows XP era look. The background is a soft
   gradient applied via background-image so a single solid color doesn't
   feel as flat as the modern themes. */
:root[data-theme="msn"],
[data-theme="msn"] {
  color-scheme: light;
  --c-bg-0: #e6f0ff;
  --c-bg-1: #ffffff;
  --c-bg-2: #f0f5ff;
  --c-bg-3: #dde8ff;
  --c-border: #a8c4ec;
  --c-border-strong: #6c98d4;
  --c-text: #0c2447;
  --c-text-soft: #355a8c;
  --c-text-dim: #6a85ad;
  --c-accent: #0066cc;
  --c-accent-soft: #3399ff;
  --c-accent-weak: rgba(0, 102, 204, 0.12);
  --c-accent-ring: rgba(51, 153, 255, 0.40);
  --c-bubble-mine: #3399ff;
  --c-bubble-mine-text: #ffffff;
  --c-bubble-theirs: #ffffff;
  --c-bubble-theirs-text: #0c2447;
  --c-bubble-theirs-border: #a8c4ec;
  /* Override the default sans stack: prefer the Windows XP staples
     Tahoma / Segoe UI for the period feel. Falls back to the modern
     stack on systems that don't have either. */
  --font-sans: 'Segoe UI', 'Tahoma', ui-sans-serif, system-ui, sans-serif;
}
/* Soft gradient background — only applied when the MSN theme is the
   ROOT theme (not a per-thread override) so a thread set to MSN doesn't
   try to repaint the whole app's body. The gradient is intentionally
   mild so it doesn't fight with chat wallpapers. */
:root[data-theme="msn"] body {
  background:
    linear-gradient(180deg, #f0f5ff 0%, #dde8ff 100%) fixed;
}
/* MSN bubbles: thicker rounded outline + a hint of the blue rim, the
   way Windows Live Messenger drew its message envelopes. Scoped to
   `[data-theme="msn"]` so other themes keep their flat modern look. */
[data-theme="msn"] .bubble.mine {
  border: 1px solid #1f7ad9;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset,
              0 1px 2px rgba(15, 80, 165, 0.15);
}
[data-theme="msn"] .bubble.theirs {
  border: 1px solid #a8c4ec;
  box-shadow: 0 1px 2px rgba(15, 80, 165, 0.08);
}

/* --- "Sketch" theme — paper notebook, hand-drawn aesthetic.
   Cream background with a faint paper-grain pattern, hand-drawn
   bubble outlines, Caveat handwritten font for body text. The
   monospace stack stays in place for elements that need
   pixel-grid alignment (timestamps, ticks) — see the rules under
   the @font-face block. */
:root[data-theme="sketch"],
[data-theme="sketch"] {
  color-scheme: light;
  --c-bg-0: #fffaf0;
  --c-bg-1: #ffffff;
  --c-bg-2: #fdf6e7;
  --c-bg-3: #f5ead0;
  --c-border: #2a2a2a;
  --c-border-strong: #1a1a1a;
  --c-text: #1a1a1a;
  --c-text-soft: #4a4a4a;
  --c-text-dim: #7a7a7a;
  --c-accent: #ff7733;
  --c-accent-soft: #ff9966;
  --c-accent-weak: rgba(255, 119, 51, 0.12);
  --c-accent-ring: rgba(255, 119, 51, 0.35);
  --c-bubble-mine: #fff3cd;
  --c-bubble-mine-text: #1a1a1a;
  --c-bubble-theirs: #ffffff;
  --c-bubble-theirs-text: #1a1a1a;
  --c-bubble-theirs-border: #2a2a2a;
  /* Caveat first, real cursive fallback for systems without it.
     The fallback chain stays robust if the woff2 fails to load. */
  --font-sans: 'Caveat', 'Comic Sans MS', cursive;
}
/* Subtle paper texture: an inline SVG layered as background-image so
   no extra HTTP request is needed. The pattern is a coarse beige noise
   that suggests fibers without competing with the text. Scoped to the
   root theme only (not per-thread overrides) so it covers the entire
   viewport. */
:root[data-theme="sketch"] body {
  background-color: #fffaf0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}
/* Sketch bubbles: thick black outline + ASYMMETRIC border-radius for
   the "hand-drawn" feel. Each bubble side gets a slightly different
   curve, like a quick pen sketch where no two corners are alike.
   Scoped to `[data-theme="sketch"]` so other themes keep their
   uniform rounded look. */
[data-theme="sketch"] .bubble.mine {
  border: 2px solid #1a1a1a;
  border-radius: 18px 22px 6px 20px;
  box-shadow: 2px 2px 0 rgba(26, 26, 26, 0.18);
}
[data-theme="sketch"] .bubble.theirs {
  border: 2px solid #1a1a1a;
  border-radius: 22px 18px 20px 6px;
  box-shadow: -2px 2px 0 rgba(26, 26, 26, 0.18);
}
[data-theme="sketch"] .bubble.bubble-deleted {
  border-style: dashed;
  background: transparent;
  color: var(--c-text-dim);
}
/* Caveat looks gorgeous on prose but messy on numbers / ticks /
   timestamps — falling back to the monospace stack keeps these
   elements readable and aligned. The plan flags this as a known
   risk; the rule below addresses it. Reactions and badges keep the
   default stack for the same reason (emoji + count). */
[data-theme="sketch"] .bubble-time,
[data-theme="sketch"] .tick,
[data-theme="sketch"] .reaction-chip-count,
[data-theme="sketch"] .file-size,
[data-theme="sketch"] .audio-bubble-time {
  font-family: var(--font-mono);
  font-style: normal;
}
/* Caveat is naturally taller than the modern sans stack — bumping the
   line-height makes the message body breathe at any text-scale. */
[data-theme="sketch"] .bubble-text,
[data-theme="sketch"] .bubble-gif {
  line-height: 1.35;
}
/* Selection mode highlight: the standard accent ring fights with the
   black outline of sketch bubbles. Use a thicker accent shadow that
   sits OUTSIDE the bubble's existing 2px border. */
[data-theme="sketch"] .bubble.selected {
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
  }
}