/* Catppuccin Macchiato (Lavender accent) — Dark mode
   Catppuccin Latte (Lavender accent) — Light mode
   Covers all shadcn/ui tokens AND Termix custom variables.
   Palette: https://github.com/catppuccin/catppuccin
*/

/* ── Overpass Nerd Font ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Overpass Nerd Font';
  src: url('/fonts/OverpassNerdFont-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}


/* ── Dark mode: Macchiato ──────────────────────────────────────────── */
:root,
.dark {
  /* Catppuccin Macchiato palette */
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo:  #f0c6c6;
  --ctp-pink:      #f5bde6;
  --ctp-mauve:     #c6a0f6;
  --ctp-red:       #ed8796;
  --ctp-maroon:    #ee99a0;
  --ctp-peach:     #f5a97f;
  --ctp-yellow:    #eed49f;
  --ctp-green:     #a6da95;
  --ctp-teal:      #8bd5ca;
  --ctp-sky:       #91d7e3;
  --ctp-sapphire:  #7dc4e4;
  --ctp-blue:      #8aadf4;
  --ctp-lavender:  #b7bdf8;
  --ctp-text:      #cad3f5;
  --ctp-subtext1:  #b8c0e0;
  --ctp-subtext0:  #a5adcb;
  --ctp-overlay2:  #939ab7;
  --ctp-overlay1:  #8087a2;
  --ctp-overlay0:  #6e738d;
  --ctp-surface2:  #5b6078;
  --ctp-surface1:  #494d64;
  --ctp-surface0:  #363a4f;
  --ctp-base:      #24273a;
  --ctp-mantle:    #1e2030;
  --ctp-crust:     #181926;

  /* Font families */
  --font-sans: 'Overpass Nerd Font', ui-sans-serif, system-ui, sans-serif;

  /* shadcn/ui standard tokens */
  --background:             #24273a;
  --foreground:             #cad3f5;
  --card:                   #1e2030;
  --card-foreground:        #cad3f5;
  --popover:                #1e2030;
  --popover-foreground:     #cad3f5;
  --primary:                #b7bdf8;
  --primary-foreground:     #181926;
  --secondary:              #363a4f;
  --secondary-foreground:   #cad3f5;
  --muted:                  #363a4f;
  --muted-foreground:       #a5adcb;
  --accent:                 #494d64;
  --accent-foreground:      #cad3f5;
  --destructive:            #ed8796;
  --destructive-foreground: #181926;
  --border:                 #494d64;
  --input:                  #363a4f;
  --ring:                   #b7bdf8;
  --radius:                 0.625rem;
  --chart-1:                #b7bdf8;
  --chart-2:                #8bd5ca;
  --chart-3:                #a6da95;
  --chart-4:                #f5a97f;
  --chart-5:                #c6a0f6;
  --sidebar:                #1e2030;
  --sidebar-foreground:     #cad3f5;
  --sidebar-primary:        #b7bdf8;
  --sidebar-primary-foreground: #181926;
  --sidebar-accent:         #363a4f;
  --sidebar-accent-foreground:  #cad3f5;
  --sidebar-border:         #494d64;
  --sidebar-ring:           #b7bdf8;

  /* Termix custom background tokens */
  --bg-base:          #24273a;
  --bg-elevated:      #1e2030;
  --bg-surface:       #363a4f;
  --bg-surface-hover: #414559;
  --bg-input:         #363a4f;
  --bg-deepest:       #181926;
  --bg-header:        #1e2030;
  --bg-button:        #363a4f;
  --bg-active:        #494d64;
  --bg-light:         #24273a;
  --bg-subtle:        #1e2030;
  --bg-interact:      #5b6078;
  --bg-hover:         #414559;
  --bg-hover-alt:     #494d64;
  --bg-pressed:       #363a4f;
  --bg-overlay:       rgba(0, 0, 0, 0.6);

  /* Termix custom border tokens */
  --border-base:      #494d64;
  --border-panel:     #363a4f;
  --border-subtle:    #363a4f;
  --border-medium:    #5b6078;
  --border-hover:     #5b6078;
  --border-active:    #939ab7;

  /* Termix custom foreground tokens */
  --foreground-secondary: #b8c0e0;
  --foreground-subtle:    #6e738d;

  /* Termix scrollbar tokens */
  --scrollbar-thumb:       #5b6078;
  --scrollbar-thumb-hover: #939ab7;
  --scrollbar-track:       #1e2030;
}

/* ── Light mode: Latte ─────────────────────────────────────────────── */
.light {
  /* Catppuccin Latte palette */
  --ctp-rosewater: #dc8a78;
  --ctp-flamingo:  #dd7878;
  --ctp-pink:      #ea76cb;
  --ctp-mauve:     #8839ef;
  --ctp-red:       #d20f39;
  --ctp-maroon:    #e64553;
  --ctp-peach:     #fe640b;
  --ctp-yellow:    #df8e1d;
  --ctp-green:     #40a02b;
  --ctp-teal:      #179299;
  --ctp-sky:       #04a5e5;
  --ctp-sapphire:  #209fb5;
  --ctp-blue:      #1e66f5;
  --ctp-lavender:  #7287fd;
  --ctp-text:      #4c4f69;
  --ctp-subtext1:  #5c5f77;
  --ctp-subtext0:  #6c6f85;
  --ctp-overlay2:  #7c7f93;
  --ctp-overlay1:  #8c8fa1;
  --ctp-overlay0:  #9ca0b0;
  --ctp-surface2:  #acb0be;
  --ctp-surface1:  #bcc0cc;
  --ctp-surface0:  #ccd0da;
  --ctp-base:      #eff1f5;
  --ctp-mantle:    #e6e9ef;
  --ctp-crust:     #dce0e8;

  /* Font families */
  --font-sans: 'Overpass Nerd Font', ui-sans-serif, system-ui, sans-serif;

  /* shadcn/ui standard tokens */
  --background:             #eff1f5;
  --foreground:             #4c4f69;
  --card:                   #e6e9ef;
  --card-foreground:        #4c4f69;
  --popover:                #e6e9ef;
  --popover-foreground:     #4c4f69;
  --primary:                #7287fd;
  --primary-foreground:     #eff1f5;
  --secondary:              #ccd0da;
  --secondary-foreground:   #4c4f69;
  --muted:                  #ccd0da;
  --muted-foreground:       #6c6f85;
  --accent:                 #bcc0cc;
  --accent-foreground:      #4c4f69;
  --destructive:            #d20f39;
  --destructive-foreground: #eff1f5;
  --border:                 #bcc0cc;
  --input:                  #ccd0da;
  --ring:                   #7287fd;
  --radius:                 0.625rem;
  --chart-1:                #7287fd;
  --chart-2:                #179299;
  --chart-3:                #40a02b;
  --chart-4:                #fe640b;
  --chart-5:                #8839ef;
  --sidebar:                #e6e9ef;
  --sidebar-foreground:     #4c4f69;
  --sidebar-primary:        #7287fd;
  --sidebar-primary-foreground: #eff1f5;
  --sidebar-accent:         #ccd0da;
  --sidebar-accent-foreground:  #4c4f69;
  --sidebar-border:         #bcc0cc;
  --sidebar-ring:           #7287fd;

  /* Termix custom background tokens */
  --bg-base:          #eff1f5;
  --bg-elevated:      #e6e9ef;
  --bg-surface:       #ccd0da;
  --bg-surface-hover: #bcc0cc;
  --bg-input:         #e6e9ef;
  --bg-deepest:       #dce0e8;
  --bg-header:        #e6e9ef;
  --bg-button:        #ccd0da;
  --bg-active:        #bcc0cc;
  --bg-light:         #eff1f5;
  --bg-subtle:        #e6e9ef;
  --bg-interact:      #acb0be;
  --bg-hover:         #ccd0da;
  --bg-hover-alt:     #bcc0cc;
  --bg-pressed:       #acb0be;
  --bg-overlay:       rgba(0, 0, 0, 0.3);

  /* Termix custom border tokens */
  --border-base:      #bcc0cc;
  --border-panel:     #ccd0da;
  --border-subtle:    #ccd0da;
  --border-medium:    #acb0be;
  --border-hover:     #acb0be;
  --border-active:    #7c7f93;

  /* Termix custom foreground tokens */
  --foreground-secondary: #5c5f77;
  --foreground-subtle:    #9ca0b0;

  /* Termix scrollbar tokens */
  --scrollbar-thumb:       #acb0be;
  --scrollbar-thumb-hover: #7c7f93;
  --scrollbar-track:       #e6e9ef;
}