:root {
  color-scheme: light dark;

  /* ---- Warm cream theme (light) — harmonized with the Chumash tribal palette ----
     Colors are drawn from / harmonize with the Santa Ynez Band of Chumash logo:
     cobalt sunburst blue, olive ring green, terracotta center red, golden accents,
     black turtle, cream ground. Cobalt blue doubles as the cyber/tech accent. */

  /* Surfaces: page = warm sand/cream gradient, chrome = cream, cards = white */
  --lc-bg: #faf7f1;          /* --bg-primary */
  --lc-bg2: #f3eee6;         /* --bg-secondary */
  --lc-bg3: #ebe4d8;         /* --bg-tertiary */
  --lc-gradient: linear-gradient(165deg, #fbf8f3 0%, #f5efe6 55%, #f0e9df 100%);

  --lc-header: #fbf9f5;      /* very light cream chrome — NOT pure white */
  --lc-sidebar: #e8e0d4;     /* deeper cream so cards separate */

  --lc-elevated: #ffffff;    /* --card-bg */
  --lc-card: #ffffff;
  --lc-card-hover: #f5f1e9;
  --lc-input: #ffffff;
  --lc-bubble: #ffffff;      /* assistant bubble = white card */

  --lc-border: #ddd5c8;      /* --border-primary */
  --lc-border-muted: #e8e1d6;

  --lc-text: #1a1613;        /* --text-primary (warm near-black, echoes the turtle) */
  --lc-text-secondary: #4a453e;
  --lc-muted: #6a645c;       /* --text-tertiary / --text-muted */
  --lc-placeholder: #9c958a;

  /* Accent — cobalt sunburst blue (tribal + cybersecurity); the single primary action */
  --lc-accent: #1e6fbd;
  --lc-accent2: #2a86c4;
  --lc-accent-strong: #164e8e;
  --lc-accent-gradient: linear-gradient(135deg, #2277c6, #14568f);
  --lc-accent-light: #e6f0fa;
  --lc-hover: rgba(30, 111, 189, 0.08);
  --lc-selected: rgba(30, 111, 189, 0.12);

  /* Tribal earth tones — used as small meaning accents, not decoration */
  --lc-tribal-blue: #1e6fbd;
  --lc-tribal-green: #4f7d2b;
  --lc-tribal-red: #a93b22;
  --lc-tribal-gold: #e0a008;
  --lc-tribal-strip: linear-gradient(90deg, #1e6fbd 0%, #4f7d2b 34%, #a93b22 67%, #e0a008 100%);

  /* Feedback colors mapped to the tribal palette */
  --lc-danger: #b4402a;       /* terracotta */
  --lc-danger-strong: #8a2e1b;
  --lc-danger-text: #6e2415;
  --lc-danger-bg: #f8ece7;
  --lc-danger-border: #e4b6a8;
  --lc-success: #4f7d2b;      /* olive/forest green */
  --lc-success-bg: #e9f0df;
  --lc-success-border: #afc98c;
  --lc-warning: #b8830a;      /* golden ochre */
  --lc-warning-fill: #e0a008;

  /* Subtle surface tints (code blocks / table headers) — warm, not neutral black */
  --lc-tint: rgba(40, 30, 10, 0.04);
  --lc-tint-strong: rgba(40, 30, 10, 0.06);

  /* Warm-tinted shadows */
  --lc-shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.06);
  --lc-shadow: 0 4px 10px -2px rgba(40, 30, 10, 0.08), 0 2px 4px -2px rgba(40, 30, 10, 0.05);
  --lc-shadow-lg: 0 12px 24px -6px rgba(40, 30, 10, 0.12), 0 4px 8px -4px rgba(40, 30, 10, 0.06);
  /* Upward shadow for the sticky composer dock */
  --lc-shadow-up: 0 -6px 16px -10px rgba(40, 30, 10, 0.18);

  /* Focus ring — visible on all interactive elements */
  --lc-focus-ring: 0 0 0 2px var(--lc-card), 0 0 0 4px var(--lc-accent);

  /* Radius scale */
  --lc-radius-sm: 6px;
  --lc-radius: 10px;
  --lc-radius-lg: 14px;

  /* Layout — centered reading column for the conversation */
  --lc-col: 900px;
}

/* ---- Dark mode (parallel set — deep charcoal "cyber" surfaces, tribal-tinted accents) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --lc-bg: #0e1216;
    --lc-bg2: #141a1f;
    --lc-bg3: #1b232a;
    --lc-gradient: linear-gradient(165deg, #121821 0%, #0e1216 55%, #0b0f13 100%);

    --lc-header: #121821;
    --lc-sidebar: #161d24;

    --lc-elevated: #182029;
    --lc-card: #182029;
    --lc-card-hover: #1f2a34;
    --lc-input: #182029;
    --lc-bubble: #182029;

    --lc-border: #2a3742;
    --lc-border-muted: #212c35;

    --lc-text: #eef3f7;
    --lc-text-secondary: #c2cdd6;
    --lc-muted: #93a1ad;
    --lc-placeholder: #6b7986;

    --lc-accent: #4d9fe0;
    --lc-accent2: #5fb0c9;
    --lc-accent-strong: #7bb8ea;
    --lc-accent-gradient: linear-gradient(135deg, #3f97dd, #2f7fc4);
    --lc-accent-light: rgba(77, 159, 224, 0.16);
    --lc-hover: rgba(77, 159, 224, 0.12);
    --lc-selected: rgba(77, 159, 224, 0.2);

    --lc-tribal-blue: #4d9fe0;
    --lc-tribal-green: #7fb356;
    --lc-tribal-red: #d5674b;
    --lc-tribal-gold: #e6b53a;
    --lc-tribal-strip: linear-gradient(90deg, #4d9fe0 0%, #7fb356 34%, #d5674b 67%, #e6b53a 100%);

    --lc-danger: #e0755b;
    --lc-danger-strong: #eda08c;
    --lc-danger-text: #f2c3b6;
    --lc-danger-bg: rgba(180, 64, 42, 0.16);
    --lc-danger-border: rgba(224, 117, 91, 0.4);
    --lc-success: #8bbf5f;
    --lc-success-bg: rgba(79, 125, 43, 0.18);
    --lc-success-border: rgba(139, 191, 95, 0.4);
    --lc-warning: #e6b53a;
    --lc-warning-fill: #e6b53a;

    --lc-tint: rgba(230, 240, 250, 0.05);
    --lc-tint-strong: rgba(230, 240, 250, 0.08);

    --lc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lc-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --lc-shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
    --lc-shadow-up: 0 -6px 16px -10px rgba(0, 0, 0, 0.6);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
  background: var(--lc-bg);
  color: var(--lc-text);
}

#root {
  height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

button,
input,
textarea {
  font-family: inherit;
}

/* Visible focus ring on all interactive elements (low specificity so
   component rules can refine it). */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--lc-focus-ring);
}

/* Respect reduced-motion: disable spinners / transitions */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}