/* ============================================================================
   Claude.ai-style theme for LibreChat (flowsly.tech)
   Loaded last (injected into client/dist/index.html at container boot), so
   these overrides win over LibreChat's bundled style.css on equal specificity.
   ----------------------------------------------------------------------------
   Covers:
     - html  (light default, vars at style.css:136)
     - .dark (style.css:199)
     - .gizmo / .gizmo.dark (legacy ChatGPT skin, style.css:260-283)
     - daisyUI / shadcn HSL tokens (--background/--primary/... )
   ========================================================================== */

/* ---- Claude's warm paper whites (light) -------------------------------- */
html {
  --brand-purple: #d97757;
  --presentation: #faf9f5;
  --text-primary: #201f1d;
  --text-secondary: #6e6b66;
  --text-secondary-alt: #8f8b84;
  --text-tertiary: #8f8b84;
  --ring-primary: #d97757;

  --header-primary: #fcfbf9;
  --header-hover: #f2f0ea;
  --header-button-hover: #f2f0ea;

  --surface-active: #edeae4;
  --surface-active-alt: #e3e0d8;
  --surface-hover: #f0eee8;
  --surface-hover-alt: #e8e5de;
  --surface-primary: #ffffff;
  --surface-primary-alt: #f7f6f2;
  --surface-primary-contrast: #efede7;
  --surface-secondary: #f7f6f2;
  --surface-secondary-alt: #e9e7e1;
  --surface-tertiary: #efede7;
  --surface-tertiary-alt: #ffffff;
  --surface-dialog: #ffffff;
  --surface-submit: #d97757;
  --surface-submit-hover: #c96442;
  --surface-chat: #ffffff;

  --border-light: #e9e7e1;
  --border-medium-alt: #dcd8d0;
  --border-medium: #dcd8d0;
  --border-heavy: #c8c3b9;
  --border-xheavy: #b0aa9e;

  --background: 40 30% 98%;
  --foreground: 24 4% 12%;
  --card: 40 30% 100%;
  --card-foreground: 24 4% 12%;
  --primary: 15 63% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 45 15% 94%;
  --secondary-foreground: 24 4% 12%;
  --muted: 45 15% 94%;
  --muted-foreground: 24 5% 45%;
  --accent: 45 20% 95%;
  --accent-foreground: 24 4% 12%;
  --border: 45 16% 90%;
  --input: 45 16% 90%;
  --ring: 15 63% 60%;
}

/* ---- Claude's warm charcoal (dark) ------------------------------------- */
.dark {
  --brand-purple: #e08d6f;
  --presentation: #1f1f1d;
  --text-primary: #ededeb;
  --text-secondary: #c0beb7;
  --text-secondary-alt: #8e8b85;
  --text-tertiary: #8e8b85;
  --ring-primary: #d97757;

  --header-primary: #21211f;
  --header-hover: #262624;
  --header-button-hover: #262624;

  --surface-active: #353532;
  --surface-active-alt: #3a3a37;
  --surface-hover: #2a2a28;
  --surface-hover-alt: #333330;
  --surface-primary: #21211f;
  --surface-primary-alt: #262624;
  --surface-primary-contrast: #2a2a28;
  --surface-secondary: #262624;
  --surface-secondary-alt: #2e2e2b;
  --surface-tertiary: #2e2e2b;
  --surface-tertiary-alt: #262624;
  --surface-dialog: #262624;
  --surface-submit: #d97757;
  --surface-submit-hover: #e08d6f;
  --surface-chat: #1f1f1d;

  --border-light: #30302e;
  --border-medium-alt: #3a3a37;
  --border-medium: #3a3a37;
  --border-heavy: #4a4a46;
  --border-xheavy: #5a5853;

  --background: 60 3% 13%;
  --foreground: 40 20% 96%;
  --card: 60 3% 15%;
  --card-foreground: 40 20% 96%;
  --primary: 15 63% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 60 3% 17%;
  --secondary-foreground: 40 20% 96%;
  --muted: 60 3% 17%;
  --muted-foreground: 20 5% 60%;
  --accent: 60 3% 17%;
  --accent-foreground: 40 20% 96%;
  --border: 60 3% 19%;
  --input: 60 3% 19%;
  --ring: 15 63% 60%;
}

/* ---- Legacy ChatGPT-skin mode (not enabled here, but keep consistent) -- */
.gizmo,
.gizmo.dark {
  --brand-purple: #d97757;
  --ring-primary: #d97757;
  --surface-submit: #d97757;
  --surface-submit-hover: #c96442;
}

/* ---- Type ----------------------------------------------------------------
   Claude sets its UI in Styrene (proprietary). Fall back to the native
   system stack, which reads closest to Claude's geometric sans when
   Styrene isn't installed. */
html,
body {
  font-family:
    'Styrene A',
    'Styrene B',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

::selection {
  background: rgba(217, 119, 87, 0.25);
}