/* LOCAL FONTS */
@font-face {
  font-family: 'INNERTEL';
  src: url("/assets/fonts/INNERTEL.ttf");
  font-display: block;
}

@font-face {
  font-family: 'Terminus';
  src: url("/assets/fonts/Terminus.ttf");
  font-display: block;
}

/* GLOBAL VARIABLES */

:root {
  /* ---------- Typography ---------- */
  --font-body: Inter, Helvetica, 'IBM Plex Sans', Geist, sans-serif;
  --font-sans: Inter, 'Fira Sans', Roboto, 'IBM Plex Sans', Helvetica, Geist, sans-serif;
  --font-mono: 'Roboto Mono', 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', 'Source Code Pro', 'Geist Mono', Inconsolata, Terminus, monospace;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-primary: var(--font-body);
  --font-logo: 'INNERTEL', arial;

  --text-xl: 1.25rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;

  /* ---------- Color Scale ---------- */
  --color-zinc-950: #040405;
  --color-zinc-800: rgba(255, 255, 255, 0.12);
  --color-zinc-400: rgb(182, 182, 182);
  --color-cyan-500: #19AAD8;

  --color-zinc-900: #101010;
  --color-zinc-500: #888888;
  
  --color-zinc-950-20: rgba(255, 255, 255, 0.2);
  --color-zinc-950-30: rgba(0, 0, 0, 0.3);
  --color-zinc-400-30: rgba(255, 255, 255, 0.3);
  --opacity-0: rgba(0, 0, 0, 0);
  --opacity-6: rgba(0, 0, 0, .6);
  --opacity-80: rgba(0, 0, 0, 0.8);
  --opacity-10: rgba(0, 0, 0, 0.1);

  --opacity-white-10: rgba(255, 255, 255, 0.1);
  --opacity-white-05: rgba(255, 255, 255, 0.05);

  --opacity-black-04: rgba(38, 38, 38, 0.4);

  --red-600: #E7000B;
  --red-500: #FB2C36;
  --red: #FF5555;
  --yellow: #DBAB09;
  --green: #00ff00;
  --blue: #5555FF;
  --gray: #999999;
  --pink: #CB5489;
  --muted: #6F6F6F;
  --pink2: #ff0080;
  --magenta: rgb(255, 0, 234);
  --white: #fff;
  --dark-gray: #171717;
  --gray-highlight: #262626;

  /* System Colors */
  --color-error: var(--red);
  --color-warning: var(--yellow);
  --color-success: var(--green);
  --color-neutral: var(--blue);
  --color-muted: var(--gray);
  --color-important: var(--pink);
  --color-progressbar: var(--green);

  /* ---------- Spacing (4px base) ---------- */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-2-5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;

  /* ---------- Radius ---------- */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 13px;
  --radius-2xl: 16px;
  --radius-3xl: 1.5rem; 
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --terminal-shadow-md: 0px 0px 10px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 10px 20px 30px rgba(0, 0, 0, 0.5);

  /* ---------- Animation ---------- */
  --duration-150: 150ms;
  --duration-300: 300ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Blur ---------- */
  --blur-lg: 16px;

  /* ----- Icon sizes ----- */
  --icon-sm: 1.1em;
  --icon-md: 1.2em;
  --icon-lg: 1.3em;
  --icon-xl: 20px;

  /* ---------- Z-Index ---------- */
  --z-desktop: 0;
  --z-window: 100;
  --z-taskbar: 200;
  --z-sidebar: 450;
  --z-dropdown: 480;
  --z-overlay: 400;
  --z-modal: 500;
  --z-tui: 999;
  --z-boot: 1000;

  /* ========================================= */
  /* COMPONENT                                */
  /* ========================================= */
  --ui-font: var(--font-sans);
  --color-text: var(--custom-text-color, var(--text-color-main, var(--default-text-color)));
  --color-primary: var(--text-color-main);
  --color-secondary: var(--accent-color-b);
  --color-cmd: var(--accent-color-b);

  /* Terminal */
  --bg: var(--terminal-bg-color, var(--theme-bg, var(--color-bg)));
  --terminal-bg: var(--terminal-theme-bg, var(--default-terminal-bg));
  --terminal-border: rgba(255, 255, 255, 0.05);
  --terminal-font: var(--font-mono);
  --terminal-output: var(--custom-text-color, var(--text-color-main, var(--default-text-color)));

  /* Window */
  --terminal-border-radius: var(--radius-2xl);
  --box-shadow: var(--terminal-shadow-md);
  --blur: none;
  --new-terminal-shadow: var(--shadow-2xl);
  --new-window-shadow: var(--shadow-2xl);
  --window-border: var(--opacity-white-10);
  --window-header-icons: var(--icon-lg);
  --rounded-full: var(--radius-full);
  --window-header-font-size: var(--text-sm);

  /* Scrollbars */
  --scroll-thumb: var(--color-primary);
  --scroll-track: rgba(0, 0, 0, 0);

  /* Menu */
  --menu-dropdown-bg: rgba(10, 10, 10, 0.75);
  --menu-dropdown-text-color: var(--color-zinc-400);
  --menu-dropdown-text-color-hover: #111;
  --menu-dropdown-icon-color: #6F6F6F;
  --menu-dropdown-border-color: rgba(255, 255, 255, 0.05);
  --menubar-dropdown-hover-radius: var(--rounded-full);
  --window-border-radius: var(--radius-2xl);
  --menu-border-radius: var(--radius-2xl);
  --menubar-icons: var(--icon-md);
  --cmd-menu-icons: var(--icon-lg);

  /* Sidebar */
  --sidebar-border-radius: var(--radius-2xl);
  --sidebar-icons: var(--icon-md);

  /* Input */
  --input-bg: transparent;
  --input-bg-mobile: rgba(255, 255, 255, 0.2);
  --input-border: rgba(255, 255, 255, 0.12);
  --input-focus: rgba(0, 0, 0, 0.3);
  --input-focus-border: var(--color-secondary);
  --input-shadow: rgba(255, 255, 255, 0.3);
  --input-placeholder: var(--color-muted);
  --input-onblur: var(--color-zinc-950-20);

  /* Buttons */
  --btn-primary: var(--accent-color);
  --btn-secondary: var(--accent-color-b);

  /* Modal */
  --popup-modal-bg: var(--opacity-80);
  --popup-modal-fg: var(--opacity-80);
  --popup-modal-text: var(--color-text);
  --window-top-margin-max: 38px;

  --search-a-hover-radius: var(--radius-lg);

  /* taskbar */
  --taskbar-icons: var(--icon-md);

  /* ========================================= */
  /* SEMANTIC  (THEME LAYER)            */
  /* ========================================= */
  --color-bg: #434343;
  --default-terminal-bg: rgba(0, 0, 0, .75);
  --bg-bsod: blue;
  --default-text-color: #A0A0A0;
  --text-color-main: #a0a0a0;
  --text-color: #A0A0A0;
  --accent-color: #A0A0A0;
  --accent-color-b: #19AAD8;
  --logo-color: #A0A0A0;
  --cmd-color: #19AAD8;
  --resp: rgb(182, 182, 182);
  --color-muted: rgb(182, 182, 182);
  --terminal-border: rgba(255, 255, 255, 0.1);
  --bg-app: var(--bg-theme-app, rgba(30, 30, 30, 0.3));
  --bg-app-sidebar: rgba(0, 0, 0, 0.15);
  --bg-app-content: rgba(30, 30, 30, 0.3);
  --tui-fg: #a0a0a0;
}


/* RESET & BASE */
html {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}

body {
  display: block;
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  overscroll-behavior: none;
}

@media (min-width: 940px) {
  body {
    overflow-x: hidden;
    overflow-y: hidden;
  }
}

a,
.accent {
  color: var(--custom-text-color, var(--color-primary));
  text-decoration: none;
}

a:hover {
  color: var(--color-secondary);
  text-decoration: none;
}

::selection {
  background: var(--color-secondary, #19AAD8);
  color: var(--color-zinc-900, #000000);
}

textarea:focus {
  outline: none;
  border: 1px solid var(--color-secondary);
  box-shadow: 0 0 5px var(--color-secondary);
}

h1 {
  font-family: var(--font-primary);
  font-size: 1.8em;
  color: var(--color-cmd, #A0A0A0);
  letter-spacing: 2px;
  text-align: left;
}

@media (min-width: 940px) {
  h1 {
    font-size: 2em;
    text-align: inherit;
  }
}

h2 {
  margin-bottom: 0;
}


/* NO JS */
.nojs {
  font-family: verdana, arial;
  color: #1a1a1a;
  font-size: 1rem;
  text-align: center;
  padding: 2rem;
  border: 0px solid #1a1a1a;
  max-width: 90vw;
}

.nojs::after {
  content: '█';
  display: inline-block;
  margin-left: 5px;
  animation: blink-caret 1s infinite steps(1);
}

@keyframes blink-caret {
  50% {
    opacity: 0;
  }
}