/* =========================================================
   GAZER × LibreChat — Brand Theme
   Derived from Gazer Brand Guidelines v1
   ---------------------------------------------------------
   Brand rule enforced: 'Blue Ribbon' and 'Persimmon' are
   NEVER combined in a single asset/theme.
     - Light theme  -> Blue Ribbon primary  (#004CE5)
     - Dark theme   -> Persimmon primary     (#DD4400)
   Headings: BB Casual Pro Semi Bold   Body: Inter Light
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "BB Casual Pro";
  src: url("/assets/fonts/BBCasualPro-SemiBold.woff2") format("woff2"),
       url("/assets/fonts/BBCasualPro-SemiBold.woff")  format("woff");
  font-weight: 650;           /* guideline weight class */
  font-style: normal;
  font-display: swap;
}
/* Inter is bundled with LibreChat; if not, uncomment:
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
*/

/* ---------- Brand tokens ---------- */
:root {
  /* Core palette */
  --gazer-blue-ribbon: #004CE5;
  --gazer-persimmon:   #DD4400;
  --gazer-black:       #000000;
  --gazer-white:       #FFFFFF;
  --gazer-cream:       #EFE6D5;

  /* Blue Ribbon tint ramp (over white) — official 20–100% */
  --gazer-blue-100: #004CE5;
  --gazer-blue-80:  #3370EA;
  --gazer-blue-60:  #6694EF;
  --gazer-blue-40:  #99B7F5;
  --gazer-blue-20:  #CCDBFA;
  --gazer-blue-hover:   #0044CE;
  --gazer-blue-pressed: #003DB7;

  /* Persimmon tint ramp (reserved for dark theme) */
  --gazer-pers-100: #DD4400;
  --gazer-pers-80:  #E46933;
  --gazer-pers-60:  #EB8F66;
  --gazer-pers-40:  #F1B499;
  --gazer-pers-20:  #F8DACC;

  /* Typography */
  --font-heading: "BB Casual Pro", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --tracking-button: 0.1em;   /* '100' tracking cap, accents/buttons only */
}

/* =========================================================
   LIGHT THEME  (Blue Ribbon)
   Maps Gazer tokens onto LibreChat's CSS variables.
   ========================================================= */
:root, html:not(.dark) {
  /* Surfaces */
  --surface-primary:        var(--gazer-white);
  --surface-secondary:      var(--gazer-cream);
  --surface-tertiary:       #F6F1E7;   /* cream, lifted */
  --surface-dialog:         var(--gazer-white);
  --surface-chat:           var(--gazer-white);

  /* Text */
  --text-primary:           var(--gazer-black);
  --text-secondary:         #3A3A3A;
  --text-tertiary:          #6B6B6B;

  /* Brand / interactive (LibreChat green accents -> Blue Ribbon) */
  --brand-purple:           var(--gazer-blue-ribbon); /* legacy var name in LC */
  --green-500:              var(--gazer-blue-ribbon);
  --green-600:              var(--gazer-blue-hover);
  --green-700:              var(--gazer-blue-pressed);

  /* Buttons */
  --button-primary:         var(--gazer-blue-ribbon);
  --button-primary-hover:   var(--gazer-blue-hover);
  --button-primary-press:   var(--gazer-blue-pressed);
  --button-text:            var(--gazer-white);

  /* Borders / rings */
  --border-light:           var(--gazer-blue-20);
  --border-medium:          var(--gazer-blue-40);
  --ring:                   var(--gazer-blue-60);

  /* Links & accents */
  --link:                   var(--gazer-blue-ribbon);
  --link-hover:             var(--gazer-blue-hover);
}

/* =========================================================
   DARK THEME  (Persimmon) — keeps blue + orange separated
   ========================================================= */
html.dark {
  --surface-primary:        #0A0A0A;
  --surface-secondary:      #141414;
  --surface-tertiary:       #1E1E1E;
  --surface-dialog:         #141414;
  --surface-chat:           #0A0A0A;

  --text-primary:           var(--gazer-white);
  --text-secondary:         #D4D4D4;
  --text-tertiary:          #9A9A9A;

  --brand-purple:           var(--gazer-persimmon);
  --green-500:              var(--gazer-persimmon);
  --green-600:              #C93D00;
  --green-700:              #B23600;

  --button-primary:         var(--gazer-persimmon);
  --button-primary-hover:   #C93D00;
  --button-primary-press:   #B23600;
  --button-text:            var(--gazer-white);

  --border-light:           #2A2A2A;
  --border-medium:          #3A3A3A;
  --ring:                   var(--gazer-pers-60);

  --link:                   var(--gazer-persimmon);
  --link-hover:             #E46933;
}

/* =========================================================
   Typographic application (per guideline hierarchy)
   ========================================================= */
h1, h2, h3, h4,
.font-heading,
[class*="text-2xl"], [class*="text-xl"] {
  font-family: var(--font-heading);
  letter-spacing: 0;
}
body, input, textarea, button, .prose {
  font-family: var(--font-body);
  font-weight: 300;                 /* Inter Light */
}
button, .btn, [class*="button"] {
  letter-spacing: var(--tracking-button);
  font-family: var(--font-heading); /* accents/buttons use primary face */
  font-weight: 650;
}

/* Focus ring in brand color */
*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}