/*
 * MACHINEDGE theme — overrides Chainlit 2.x dark palette.
 *
 * Aligned with machinedge.io website brand identity.
 *
 * Chainlit loads custom_css BEFORE its own stylesheet, so bare .dark{}
 * gets overridden by Chainlit's later .dark{} block. Using html.dark
 * (specificity 0,1,1) beats Chainlit's .dark (0,1,0) regardless of
 * load order.
 *
 * Palette (HSL triples — ShadCN convention, no hsl() wrapper):
 *   #091421  213 63%  8%    deep navy bg
 *   #132236  215 48% 14%    surface / cards
 *   #2ecc71  145 63% 49%    brand green accent
 *   #f7fbff  210 75% 97%    primary text
 *   #a7b5c7  214 22% 72%    muted text
 */

/* ── Oxygen font (self-hosted, matches machinedge.io) ──────────────────── */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/public/fonts/Oxygen-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/public/fonts/Oxygen-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/public/fonts/Oxygen-Bold.ttf') format('truetype');
}

html, body {
  font-family: 'Oxygen', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

html.dark,
body.dark {
  --background:                 213 63% 8%;
  --foreground:                 210 75% 97%;

  --card:                       215 48% 14%;
  --card-foreground:            210 75% 97%;

  --popover:                    215 48% 14%;
  --popover-foreground:         210 75% 97%;

  --primary:                    145 63% 49%;
  --primary-foreground:         213 63% 11%;

  --secondary:                  215 48% 14%;
  --secondary-foreground:       210 75% 97%;

  --muted:                      215 48% 14%;
  --muted-foreground:           214 22% 72%;

  --accent:                     215 48% 14%;
  --accent-foreground:          210 75% 97%;

  --destructive:                6 64% 63%;
  --destructive-foreground:     0 0% 100%;

  --border:                     215 20% 25%;
  --input:                      215 20% 25%;
  --ring:                       145 63% 49%;

  --sidebar-background:         215 48% 14%;
  --sidebar-foreground:         210 75% 97%;
  --sidebar-primary:            145 63% 49%;
  --sidebar-primary-foreground: 213 63% 11%;
  --sidebar-accent:             215 48% 14%;
  --sidebar-accent-foreground:  210 75% 97%;
  --sidebar-border:             215 20% 25%;
  --sidebar-ring:               145 63% 49%;
}

/* ── Light theme — orange buttons (website warm accent #f4a261) ────────── */
html.light,
body.light {
  --primary:                    29 88% 67%;
  --primary-foreground:         0 0% 100%;
  --ring:                       29 88% 67%;
  --sidebar-primary:            29 88% 67%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-ring:               29 88% 67%;
}